2012年6月アーカイブ

ウェビメモさんのブログ記事を読んでたら知ったんですけど、「指定した長さからはみ出した文字列を省略表示する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;」も併せて記述しないと適用されないようです。