More than 5 years have passed since last update.

CSSではみ出したテキストを「...」で省略

Posted at 2017-09-12

テーブルで長いテキストが入っている列が横長になってしまい
大変見栄えが悪くて困っていたら、
cssだけで簡単にできました。

下のプロパティを使います。

text-overflow: ellipsis;
white-space: nowrap;

例えば、セル幅の最大幅を300pxと決めて、それ以上になる文字列は省略する場合、

table td {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

色々と応用できそうですね。

104