[HTML & CSS General] CSS: 長い文字列を「…」で省略表示する

公開日: 2014/01/30
更新日: 2019/09/15

memo.

パンくずやページナビに適用してみました。
ふるい IE でも表示されるよう。

// CSSだけで文字列を省略
.abbreviation {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 300px;
    white-space: nowrap;
}