[CSS]長いURL /長い文字の改行

長いURLの領域を逸脱

上記の図のように、長いURLや長い文字がコンテンツ領域を脱し表示される場合があります。 この場合、CSSを使用して、コンテンツ領域の最後に到達すると、改行する処理することができます。

長いURL /長い文字の改行

コンテンツ領域を外れた長いURLや長い単語を強制的に改行されるようにするには、次のようなCSSコードを使用します。

.entry-summary {
word-wrap: break-word;
}
長いURLの改行

上記の要素名は適切な変更をするようにします。 これにより、次のように長いURLこの領域を逸脱することなく、改行になります。

break-wordの代わりにbreak-allを使用すると、文字間でも改行されます(Mozilla ドキュメント を参照)。

word-break: break-all;

上記のCSSコードがうまく動作しない場合は、次のようなコードを試してみてください。

overflow-wrap: break-word;
word-wrap: break-word;

次のようなCSSコードも試してみることができます。

white-space: pre-line;

overflowになるコンテンツを非表示に省略記号(...)で置換するには、以下のように使用します。

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

メモ:


2のコメント

  1. 寀ーでは、次のようなコードを追加すると、なりますね。

    /* 강제 줄바꿈 */
    .skin_view .area_view pre {
    white-space: pre-line;
    }

  2. これ、寀ー2009年に書き込みを開始するときから経験した問題だった
    解決探して見たら、ここまで入ってきましたね。
    (原理把握は他の方の投稿で…ㅠ)

    寀ースキン製作者の方々これスキップ場合が多い WordPress の方もそうなのか見て?
    とにかくこれも解決されると、〜現在 AdSense ベータテスト中の「アンカー広告」すっきりつけてしまうことがイトスムダ!

コメントを残す

*メールアドレスは公開されません。