サイトアイコン memo-memo

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

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などで表示を確認しながら変更してみるとわかりやすいでしょう。

結果

 

モバイルバージョンを終了