More than 5 years have passed since last update.

CSSだけで幅を超えた文字列を...で省略する

Last updated at 2013-02-23Posted at 2013-02-02

ある幅に合わせて文字列を省略したいときがありますが、
レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。

ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。

p{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis; /* Opera9,10対応 */
}

<p>もじもじもじもじもじもじもじもじもじもじもじ</p>

面白いのは、省略されて後ろについた「...」までを選択してコピペすると省略されて隠れている部分までちゃんとコピペできます。

SEO的にも問題なさそうだし使ってみよう

554