表示領域をはみ出したテキストを「・・・」で省略して表示しないようにする方法

|

ウェビメモさんのブログ記事を読んでたら知ったんですけど、「指定した長さからはみ出した文字列を省略表示するCSS」っていうのがあったのですね・・・。こういうのってPHPとか使わないとできないと思ってました・・・。

「text-overflow」というプロパティでテキストを省略表示するかどうかを指定します。

(X)HTMLコード

<ul>
   <li>ああああああああああああああああああああああああああああ</li>
   <li>いいいいいいいいいいいいいいいいいいいいいいいいいいいい</li>
   <li>うううううううううううううううううううううううううううう</li>
   <li>ええええええええええええええええええええええええええええ</li>
   <li>おおおおおおおおおおおおおおおおおおおおおおおおおおおお</li>
</ul>

CSSコード

 li{
   width:300px;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-text-overflow:ellipsis;
   -o-text-overflow: ellipsis;
   white-space:nowrap;
}

どうやら、ブラウザによってはプレフィックス(接頭辞)を付けないと適用されないようで、あと、「white-space:nowrap;」も併せて記述しないと適用されないようです。

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事