文章が長くなっても一行に収めたかった
こんにちは、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