テキストの折り返し制御 white-space
normal (デフォルト)
テキストは要素の幅に合わせて自動で改行されます。連続する半角スペースは1つにまとめられます。
HTMLで文章を書くと、通常はウィンドウの幅に合わせて自動的に改行されます。
nowrap
テキストを折り返さず、一行で表示します。親要素の幅を超えても改行されません。
HTMLで文章を書くと、通常はウィンドウの幅に合わせて自動的に改行されます。
pre
HTMLソースコードの改行やスペースをそのまま反映します。プログラミングコードの表示などに使います。
HTMLで文章を書くと、
通常はウィンドウの幅に合わせて
自動的に改行されます。
はみ出した部分の処理 overflow
visible (デフォルト)
要素のボックスからはみ出して表示されます。
このテキストはボックスの幅を超えると、そのままはみ出して表示されます。
hidden
はみ出た部分は非表示になり、見えなくなります。
scroll
はみ出しに関わらず、常にスクロールバーが表示されます。
このテキストはボックスの幅を超えると、スクロールして見ることができます。常にバーが表示されます。
auto
はみ出た場合だけ、自動的にスクロールバーが表示されます。
このテキストはボックスの幅を超えた時だけ、スクロールバーが表示されて便利です。
単語の途切れを調整する
word-break: break-all
単語の途中でも、ボックスの端で強制的に改行します。URLや長い英単語の表示に便利です。
ThisIsAVeryLongWordThatWillBeBroken.
URL: https://www.this-is-a-super-long-and-detailed-url-that-needs-to-be-wrapped.com/example
URL: https://www.this-is-a-super-long-and-detailed-url-that-needs-to-be-wrapped.com/example
overflow-wrap: break-word
単語が長すぎてはみ出す場合のみ、単語の途中で改行します。自然な改行を優先します。
ThisIsAVeryLongWordThatWillBeBroken.
URL: https://www.this-is-a-super-long-and-detailed-url-that-needs-to-be-wrapped.com/example
URL: https://www.this-is-a-super-long-and-detailed-url-that-needs-to-be-wrapped.com/example
解決策の例：一行表示＋三点リーダー
「画面幅が狭くなった時に、テキストを一行に保ち、はみ出た部分は...で省略したい」という要望を、プロパティの組み合わせで実現します。
p {
white-space: nowrap; /* テキストを折り返さない */
overflow: hidden; /* はみ出た部分を非表示に */
text-overflow: ellipsis; /* 省略記号(...)を表示 */
}
white-space: nowrap; /* テキストを折り返さない */
overflow: hidden; /* はみ出た部分を非表示に */
text-overflow: ellipsis; /* 省略記号(...)を表示 */
}