文章が長くなっても一行に収めたかった
こんにちは、ndj です。HTMLでタグ内の文章が長くなった場合でも行幅を保持したい場面があったので、その方法を記録しておきます。
ついでに、行幅を保持した場合に起こる不格好な部分も成形する方法も記録しておきます。
この記事の要約
- 文章を一行に収めるためには、
white-spaceプロパティをnowrapに指定する。 - 文章の長さがタグの横幅を超えた分を非表示にするには
overflowプロパティをhiddenに指定する。 - 文章の長さがタグの横幅を超えたとき、省略記号を表示するには
text-overflowプロパティをellipsisに指定する。
文章を一行で納めるためには white-space プロパティに nowrap を指定する
題の通りです。
サンプルを以下に記します。
See the Pen QWEXmJJ by ndj (@ndjndj) on CodePen.
pタグの widthは横幅を設定するためにとりあえず指定しています。borderは横幅を明示的にするために設定しています。
通常、文章の長さが指定した横幅を超える場合は行の折り返しが発生しますが、white-spaceに nowrapを指定すると行の折り返しは行われません。MDN web docsによると white-spaceプロパティは「要素内のホワイトスペースをどのように扱うかを設定する」プロパティだそうです。
このプロパティは、デフォルトでは、normalが設定されています。normalプロパティの挙動は以下の通りです。
連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。
参考：MDN web docs: white-space
一方で、nowrapプロパティは以下のように、
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
参考：MDN web docs: white-space
とあります。
つまり、行の折り返しをさせないためにこのプロパティを nowrapに設定するわけですね。
しかし、上記のサンプルですと、行の折り返しを行わないので文章が横幅を超えてしまった場合はそのまま要素の横幅からはみ出してしまうので不格好です。
文章の長さがタグの横幅を超えた分を非表示にするには overflowプロパティを hiddenに指定する。
行の折り返しを行わないために、指定した横幅よりも文章が長くなってしまう場合があります。
あらかじめ指定した横幅よりも長くなってしまった文章を非表示にするサンプルを以下に記します。
See the Pen qBNzYVP by ndj (@ndjndj) on CodePen.
上記のように、overflowプロパティを hiddenに設定することで幅を超えた文章を非表示にすることができます。MDN web docsによると、overflowプロパティの初期値は、visibleに設定されています。
これで、文章が長くなってしまっても指定した横幅を超えないように設定することができました。
文章の長さがタグの横幅を超えたとき、省略記号を表示するには text-overflowプロパティを ellipsisに指定する。
最後に、文章の長さがタグの横幅を超えたときに省略記号を表示する方法を記録しておきます(やり方は題のとおりなんですが)。
以下にサンプルを記します。
See the Pen eYzwryz by ndj (@ndjndj) on CodePen.
上記のように、text-overflowプロパティを ellipsis (省略記号という意味らしいです)に設定すると、文章が長くなってしまった場合に省略記号が表示されます。MDN web docsによると、初期値は clipといって、文章が指定した幅を超えた場合はそこで切り取るという設定です。
このプロパティは行の折り返しの有無を制御したり、文章が幅からはみ出すことの有無を直接指定するものではないことに気をつけたいです。
ちなみに、省略記号を任意のものにする text-overflow: "任意の文字列"という設定もあるのですが、2020年11月22日時点では、 firefox、Android 版 firefox以外ではサポートされていないそうです。
参考：MDN web docs: text-overflow
最後に
文章が長くなってしまった場合でも、レイアウトは崩したくない。。という場面があり、これからも出くわしそうだなと思ったので記録しておきます。
以上です。ここまで読んでくださりありがとうございました。
誤字脱字、アドバイスやご指摘などありましたらコメントいただけると幸いです。
参考
Web備忘録: [CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法
MDN web docs: white-space
MDN web docs: overflow
MDN web docs: text-overflow