「CSS」text-overflowで文字列を省略して末尾を三点で表示する

2014年6月25日2021年8月20日

構文
1.white-space
要素内のホワイトスペースをどのように扱うかを設定します。
値nowrap:行の折り返しは行いません。

2.overflow
要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。

3.text-overflow
非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。
値ellipsis； このキーワード値は、切り取られたテキストを表現するために省略記号 ('…’,

使用例
CSSコード

.cft {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

htmlコード

<p class="cft">長すぎる文字列xxxx</p>