■ はじめに
CSSのみで、文字列の省略を簡略化する方法について記事にしました。
この記事で得る内容は以下の通りです。
・CSSの基礎知識が増える
・長文で文字が表示しきれない際の対応ができる様になる
■ 例
例えば、以下の様なブログの見出しで、これを1行にしたい場合
white-space: nowrap;で改行させず、1行にし
overflow: hidden;で要素からはみ出た文字を非表示にして
text-overflow: ellipsis;と指定すると、文字列を省略することができます。
要素の幅が変わっても、要素の領域分まで文字を表示し、文字列の省略は消えません。
ただ、今回ご紹介した方法では、文字列が1行の場合のみにしか使えませんので注意が必要です。