三部作
/* 1.テキストを最初に1行に表示させるには */
white-space: nowrap;
/* 2.はみ出しを隠す */
overflow: hidden;
/* 3.テキストは省略記号でオーバーフローを置き換える */
text-overflow: ellipsis;
ホワイトスペース
- white-space は、テキストの表示方法を設定または取得します。通常、行の内容を強制的に表示するために使用します。
white-space: normal;デフォルト処理
white-space: nowrap;全てのテキストが同じ行内に表示されるように強制し、改行はテキストの最後かbrタグ・オブジェクトに遭遇した時にのみ発生することを知る。
テキストオーバーフロー テキストオーバーフロー
- オブジェクト内のテキストのはみ出しに省略記号を使うかどうかを設定または取得します。
text-overflow: clip;省略記号を表示する代わりに、単に切り抜く
text-overflow: ellipsis;オブジェクト内のテキストがオーバーフローしたときに省略記号を表示する (...)
注意：最初に必ず1行に表示させ、その後overflow属性で再度使用してください。
