LoginSignup
556

More than 5 years have passed since last update.

posted at

updated at

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

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

ですが以下のように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
What you can do with signing up
556