text-overflow

Module Reference

CSS Overflow

Feature Reference

text-overflow

What is this?

長いテキストの溢れた部分をどう省略するか、省略されていることをどのような記号で表現するかを指定する。

そもそもテキストを溢れさせるには

.text {
  overflow: hidden;
  white-space: nowrap;
}

Values

clip

溢れた文字列は切り取って非表示にする。

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

ellipsis

…で省略されていることを表す。

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

複数行に渡るテキストの末尾を省略したい場合

• -webkit-line-clamp を使う

Status

2023/01/08時点では、

• カスタム省略文字列の適用はFirefoxのみ対応
• 値を2つ設定して、行頭にも省略文字列を適用できるのもFirefoxのみ