text-overflow | WebworksTips

text-overflowプロパティは、ボックスに収まらない文章の表示方法を指定する。overflowプロパティの値がhiddenのときに意味を持つプロパティである。

ellipsisを指定すると、収まらない文章は切り取られ、切り取られた部分に省略記号が表示される。
任意の文字も引用符（”）で囲って省略記号として指定できるが、2023年時点ではFifefoxしか対応していない。

text-overflow: ellipsis;

.highlight{
  width: 23em;
  height: 20px;
  white-space: nowrap;
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
}