てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「標準スキン」です。他に、 昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る

or 管理画面へ

No.2886, No.2885, No.2884, No.2883, No.2882, No.2881, No.28807件]

朝食はピザトースト。

🍵Re:2882◆word-breakとoverflow-wrapの違いを検索すると上位に出てくるこのページですが、W3Gなんですよね。(笑) 最初は私もW3Cがこんな分かりやすい解説を書いているのかと思いました。^^;
🍵Re:2883◆お知らせありがとうございます。驚きました。(公式以外で)てがろぐスキンを配布して下さった第1号ですね(少なくとも私の認識している範囲内では)。ありがたいことです。

🍵Re:2884◆『自動でリンクになるURL』だと自動改行されるのですよね? だとすると、たしかに何らかのCSSで打ち消されているのでしょうかね……。他のスタイルで打ち消されるのが問題なら、body .comment { word-break: break-all !important; overflow-wrap: break-word !important; } のように書いておくと、さすがに(詳細度が上がって)上書きできて適用されるのではないかと思うのですが。(ボックスが無限に横方向に拡張されてしまうようなレイアウトになっているのかな……と一瞬思ったのですが、その場合は『自動でリンクになるURL』も横に伸びないとおかしいので、そうではないんですよね……。)もし設置されているサイトをメールででもお知らせ頂けるなら、こちらからアクセスして何が原因なのか究明することは可能です。

🍵Re:2885◆Sleipnirのシェアが今どれくらいなのか謎ですが、今でも精力的に更新されているので、何らかの収益は上がっているのでしょうかね? 無料ソフトですけども。しかも、Ver.4系とVer.6系の開発が同時に進行していて、今でもVer.4系のアップデートも続いているのですよね。結構な開発リソースが必要だと思うのですが。私の環境にもインストールはしてあります。

雨が降っていなかったら銀行に行こうかと思っていたのだけど、降っておる。(´・ω・`) めちゃくちゃ風が強い。

by nishishi. 回答/返信 <878文字> 編集

Sleipnirってまだ更新してたんだ。タブブラウザ全盛期が懐かしい…。私はLunascape使ってました。

by admin. <54文字> 編集

2878です。

>>2879さん
当方EdgeとSleipnirを使ってまして、どちらも折り返しませんでした。なのでCSSの問題かと思っており、どう検索したものか分からずこちらに、、。まさかブラウザが原因だとは考えもしませんでした。

>>2881さん
お返事ありがとうございました。
早速試しましたが、効果はありませんでした。
新たにてがろぐを設置して確認してみましたら、【自動でリンクにならないURL】はご指示の通り改行されていました。
問題があるのはうちのCSSかレイアウトのようです。何が原因なのかさっぱり……。

お騒がせしました。
お忙しい中、ありがとうございました。

>>2883さん
見やすいスキンですよね!
【自動でリンクにならないURL】に関して困っていたのでdoさんのスキンでも試して、改行がされず、お手上げ状態になってました。。。

by admin. <379文字> 編集

いいねボタンのdoさんがてがろぐのスキンを配布しはじめたんですね!私はHTMLいじりが好きなのでスキンは自分で作成派てすが、HTMLが苦手な方には朗報ですね!

by admin. <79文字> 編集

>>2881
2879です。W3Cがword-wrap:break-word;が効かない場合を書いてくれてました。そうだった、私のスキンでは幅指定してるからはみ出さないんですね。CSS本当にややこしい…。

by admin. <102文字> 編集

おなかがへってきました。_(┐「ε:)_

🍵Re:2873◆早速のバージョンアップをどうもありがとうございます。(╹◡╹)ノ
🍵Re:2875◆下げる機能の動作を果たして把握して頂けるかどうかが不安だったのですけども、把握どころか意外とご活用頂けていそうな感じで驚いています。^^;
🍵Re:2877◆ご活用ありがとうございます!

🍵Re:2878◆ブラウザには「英単語の途中では改行しない」という禁則処理があります。そのせいで、半角英字を長く連続させるとウインドウからはみ出て横スクロールが発生します。URLも「英字の連続」なので同様の禁則処理が働いてしまうのですよね。Firefoxだけは「/」記号を「単語の区切り」だと認識してくれるので、「/」が出てきたところで自動改行されるため、横には伸びずに済むのですが。

てがろぐでは、URLの自動リンクではa要素に class="url" という属性を付加してありまして、標準添付の各スキンのCSSではここに word-break: break-all; というスタイルを適用して、英単語だろうが何だろうが「描画領域の端」で強制的に改行するように指定してあります。なので、リンクになってさえいれば「URL」でも「長い英単語」でも何でも強制改行されます。

今回ご質問頂いたケースである「自動でリンクにはならないURLの書き方」は、「URLだとは認識されないから自動リンクにならない」わけですから、要するに普通の本文なので何のスタイルも適用されません。なのでブラウザ標準の禁則処理が働いてしまって、横に伸びるわけです。ブラウザ側の標準動作がそうなので、これを防ぐには何らかのスタイルを自ら適用しないとどうにもなりません。(てがろぐの問題ではなく、どんなWebでも同様です。)

▼解決策①
で、本文中に含まれるあらゆる英単語が途中で改行されても構わないなら .comment { word-break: break-all; } というCSSを追加すると解決します。

▼解決策①B
※サイドバーの存在しないレイアウトをお使いなら、.comment { overflow-wrap: break-word; } の方を使うと、短い英単語が途中でぶった切られるのを防げるので望ましいです。(サイドバーがあるレイアウトでこのCSSを使うと、段組の作り方によってはうまくいきません。例えば「標準スキン」や「Twitterっぽいスキン」ではこの方法では対処できません。しかし「ブログタイプスキン」は(サイドバーがあるものの)この方法で対処可能です。)※参考:word-breakoverflow-wrap(@MDN)

▼解決策②
なお、本文中に含まれるあらゆる英単語が途中でぶった切られると困るわい、という場合は、リンクにしたくないURLをとりあえず自由装飾記法を使って [F:longword:~] とかで装飾しておいて、 .deco-longword { word-break: break-all; } というCSSを追加すると良いと思います。

解決策①B > 解決策② > 解決策① の順でお勧めです。(解決策①Bが使えないスキンをお使いなら、解決策②がお勧めということになります。)

🍵Re:2879◆この場合は、Firefoxの動作が望ましいですね。URLに含まれる「/」記号で改行するなら自然だと思います。なぜ、他のレンダリングエンジンではそうならないのか……。^^;

by nishishi. 回答/返信 <1500文字> 編集

https://www.nishishi.org/testground/tegalog/tegalog.cg...
https://www.nishishi.org/testground/tegalog/tegalog.cgi?q=%E3%83%86%E3%82%B9%E3%83%88&userid=admin&date=2022%2F06&tag=UpdateLog&cat=updates&order=

by admin. <293文字> 編集

DASHBOARD

■複合検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

■新着画像リスト:

Perlのバージョンを上げる設定(さくらインターネット)

全317個 (総容量 36.08MB)

■日付一覧:

■日付検索:

■カレンダー:

2022年6月
1234
567891011
12131415161718
19202122232425
2627282930

■最近の投稿:

■フリースペース:

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

編集

▼現在の表示条件での投稿総数:

7件

▼最後に投稿または編集した日時:

2025年5月31日(土) 21:25:21〔8時間前〕

RSSフィード

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「標準スキン」です。他に、 昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る