LoginSignup
553

More than 5 years have passed since last update.

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

Last updated at Posted 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的にも問題なさそうだし使ってみよう

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
553