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