表示幅に合わせて文字列を省略して「…」を付ける

0
1000
views

CSS を使って可変表示領域の中に文字を収めていきます。3段階の手順を踏みます。

デフォルト

デフォルトでは、親要素の幅を超えるテキストは折り返されます。

CSS がデフォルトの状態

実装手順

それでは、3段階の手順を踏み、文字を収めていきます。

1. white-space

white-space:nowrap; を使ってテキストの折り返しを無くします。

テキストの折り返しを無くす CSS

2. overflow

overflow:hidden; を使って親要素の幅を越えるテキストを非表示にします。

親要素の幅を越えるテキストを非表示にする CSS

3. text-overflow

text-overflow:elipsis; を使って、テキストを親要素の幅に合わせたうえで末尾に3点リーダ「…」を付けます。

テキストを幅に合わせ3点リーダを付ける CSS

elipsis(エリプシス)は「省略」を意味します。

text-overflow プロパティに設定可能な値は elipsis の他に clip がありますが、clip を使うと親要素の幅を越えた文字はぶつ切りで非表示になります。

clip 領域内でクリップ。はみ出るものは非表示
ellipsis 領域内に文字列を収め、末尾に省略記号を付ける

ブロック要素に指定する

white-space、overflow、text-overflow、3つのどのプロパティもブロック要素にしか効かないこと。子要素がブロック要素なら、overflow と text-overflow は子要素に掛けるなど、CSS の仕様に沿ったコーディングをするよう注意します。

CSS を指定する要素の違い

できないこと

1行にしか適用できません。

例えば2行であふれる分は省略させるなど、複数行を指定して表示幅に収めることは、この方法ではできません。