領域からはみ出てる文字列をCSSだけで「・・・」にする

site: http://develo.org/text-overflow-ellipsis

サイトを作っていると、デザイン的に一行におさめたい・・。という時があります。

そういう時はJavascriptで文字制限したり。予めサーバー側で文字制限した文字列を渡してもらうなどして対処していたのですが

CSSでできないのかなぁ・・。といろいろ試したところ少しつかいどころに制限はありますができるようです！

DEMO

1行の場合

HTML

<p>テストテストテストテストテストテストテストテストテスト</p>

CSS

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

floatしている場合

HTML

<ul>
    <li>カテゴリー : HTML,CSS,Javascript</li>
    <li>タグ : jQuery</li>
    <li> テストテストテストテストテストテストテストテストテスト</li> 
</ul>

CSS

li {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li:last-child {
    float: none;
}

ポイントは「last-child」で最後のタグはfloatしないことです。
最後をfloatしないことにより、タグが親タグの幅いっぱいに広がり親タグの範囲での文字制限をすることができます。

最後のタグをfloatしている場合は、タグが次の行に落ちてしまいます。

または幅を指定しての文字制限も可能です。
文字数で制限したい場合には「em」を使うとよいです。

5文字制限したい場合のCSS

li:last-child {
    float: none;
    width: 5em
}