[CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法

CSS で超過文字を省略したい

レイアウトの調整する為に、要素からはみ出すような文字を省略して表示したいことがよくあります。

例えば、超過した文字を折り返して表示すると要素の高さが揃わなくて不細工になったりする場所や、スクロール表示ができないような場所です。1行で収めたいけど尻切れトンボになってしまうと見栄えがよろしくないという場合、文章末尾に「…」と三点リーダーをつけて、ユーザーに続きがあるよと伝えるといい感じになったります。

ここでは CSS での実装方法についてまとめます。

実装方法

text-overflow: ellipsis;

対象となる要素(省略する文字列を持つ要素)に、CSS で text-aoverflow プロパティに、ellipsis を指定します。ellipsis は省略記号の意味なので、超過分のテキストは省略記号で表示しますよという意味になります。

具体的に実装は以下のようになります。

.ellipsis {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="ellipsis">
    こんにちは。今日はいい天気ですね。
</div>

サンプル表示

注意点

省略記号の表示は、表示領域が制限されていなければなりません。したがって、text-overflow プロパティ以外にもいくつか指定する必要があります。

white-space: nowrap; は、超過分の文字列を折り返し表示しないようにするための設定です。省略記号は、1行表示以外では使えません。

overflow: hidden; は、超過分の文字列を非表示にするための設定です。visible を指定すると要素をはみ出して文字列が表示されるのでそれ以外を指定する必要があります。

width: 150px; は、要素の幅を制限しています。別に指定しなくてもよいです。その要素の幅を超える文字列が省略記号で置き換わります。

以上。

参考URL

• text-overflow – CSS: カスケーディングスタイルシート | MDN