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

Data

2014/09/25

Tag

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

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

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

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

1行の場合

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

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

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

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

li:last-child {
    float: none;
}

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

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

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

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