今回は、テキストが長い(多い)場合のCSS対応。
下記の3つを学習しました。
・overflow
・white-space
・text-overflow
#overflow
・役割
枠内に収まらない場合、はみ出し部分の表示方法のプロパティ
・一覧表
値 | 機能 |
---|---|
visible | デフォルトでそのまま |
hidden | 非表示にする |
scroll | スクロール表示される |
#white-space
・役割
改行やスペースの扱いを指定するプロパティです。
・一覧表
値 | 機能 |
---|---|
normal | 自動で折り返し |
nowrap | 折り返しなし。まとめて表示 |
pre | 折り返しなし。そのまま表示 |
pre-wrap | 折り返しあり。そのまま表示 |
pre-line | ソースで改行してる箇所は改行表示。自動折り返しあり。 |
・参考例
#text-overflow
・役割
隠れた内容をどのように表示させるか
※テキストが隠れている場合のみ使用出来ます。
※overflow:hidden、white-space:nowrap上記も合わせて使用すると使用できる???
・一覧表
| 値 | 機能 |
|:-:|:-:|:-:|
|clip|末端でテキストを切り取る|
|ellipsis|...と表示する 3点リーダー |
#参考にしたサイト
・https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
・http://www.tohoho-web.com/css/prop/text-overflow.htm
・http://www.htmq.com/css/overflow.shtml
.http://www.htmq.com/style/white-space.shtml
以上、たにーでした。