【CSS】テキスト1行で文末「…」にする行数制限にする方法

どうも、くまだです。

前に当ブログでCSSで〇行以上になったら文末を「…」にする記事を書きました。

上記の方法は複数行に対応したものですが、今回は複数行対応不可・1行のみのときに使える行数制限の方法です。

テキスト1行で文末「…」にする行数制限

行数制限のイメージとしては、下記の画像の状態です。

コードはこちら。

〇 HTML

<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

〇 CSS

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

テキストがどこまで表示されるかはwidthで決定しています。上記の場合だと、100px分表示されている感じです。

white-space: nowrap;で改行させないようにし、overflow: hidden;で100pxよりはみ出た部分を隠す。

肝心の「…」のところは、text-overflow: ellipsis; で対応しています。

なお、デフォルト値はtext-overflow:clip;で、「…」は表示されません。

white-space: nowrap;を解除してしまうと、テキストが折り返されてしまうので、text-overflow: ellipsis; が効きません。（だから複数行には対応していない）

複数行で対応する場合は、下記の方法がいいかと思います。

ここまで読んでくださりありがとうございました。