No.2881
- ユーザ「にしし」の投稿だけを見る (※時系列順で見る)
- この投稿と同じカテゴリに属する投稿:
- この投稿日時に関連する投稿:
- この投稿に隣接する前後3件をまとめて見る
- この投稿を再編集または削除する
お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)
動作サンプルです。 ご自由にお試し下さい。パスワードguest
で管理画面もお試し頂けます。
■いま見ているスキンは「標準スキン」です。他に、
昔のツイッターっぽいスキン(ブルー)、
昔のツイッターっぽいスキン(ピンク)、
付箋型スキン、
シンプル日記スキン、
ジャーナル(日誌)スキン、
ブログタイプスキン(タイトル付きブログっぽくできるスキン)、
黒板スキン、
チャットタイプスキンがあります。
《てがろぐCGIの配布・解説ページに戻る》
No.2881
動作サンプルです。 ご自由にお試し下さい。パスワードguest
で管理画面もお試し頂けます。
■いま見ているスキンは「標準スキン」です。他に、
昔のツイッターっぽいスキン(ブルー)、
昔のツイッターっぽいスキン(ピンク)、
付箋型スキン、
シンプル日記スキン、
ジャーナル(日誌)スキン、
ブログタイプスキン(タイトル付きブログっぽくできるスキン)、
黒板スキン、
チャットタイプスキンがあります。
《てがろぐCGIの配布・解説ページに戻る》
🍵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-break、overflow-wrap(@MDN)
▼解決策②
なお、本文中に含まれるあらゆる英単語が途中でぶった切られると困るわい、という場合は、リンクにしたくないURLをとりあえず自由装飾記法を使って [F:longword:~] とかで装飾しておいて、 .deco-longword { word-break: break-all; } というCSSを追加すると良いと思います。
解決策①B > 解決策② > 解決策① の順でお勧めです。(解決策①Bが使えないスキンをお使いなら、解決策②がお勧めということになります。)
🍵Re:2879◆この場合は、Firefoxの動作が望ましいですね。URLに含まれる「/」記号で改行するなら自然だと思います。なぜ、他のレンダリングエンジンではそうならないのか……。^^;