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

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

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

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

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

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

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