[CSS] 一行に収まらない場合は「 …」で省略表示

0

overflow

HTML要素のサイズよりも大きな内容が含まれている場合に、どのように要素の枠外に含まれたコンテンツを扱うかを指定するプロパティです。

オプション

visible枠外に含まれたコンテンツを表示
hidden枠外に含まれたコンテンツを隠す
scroll枠外に含まれたコンテンツを隠し、スクロールバーを表示
auto枠内にすべてのコンテンツを表示するには十分なスペースがない場合、スクロールバーを表示

コード

<div style="border:1px solid; width: 200px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div> 

下記を指定することではみ出る部分を省略表示にできる。

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

webkitなどで表示を確認しながら変更してみるとわかりやすいでしょう。

結果