2014.08.18 Web CSS,PC,スマホ,タブレット,テキスト,デバイス,ブロック要素,プロパティ,制御,折り返し禁止,抜粋,文字数,画面幅,表示,語尾,非表示

画面幅が変わったときのテキストのくずれをCSSで制御する方法

ホームページやブログ記事において、例えばタイトルや見出しが長すぎると画面の表示幅によっては折り返しやテキストがはみ出るので、デザイン的によろしくない。Wordpressでは『抜粋』によって予め制限した文字数のみを表示するこもできるが、画面幅内に文字数がおさまらなければ折り返しになることは変わりがない。どんなデバイスであっても、その画面幅に合わせて文字数が自動で制限され、かつ語尾には『…』と続きを表現してくれるCSSを教わったのでメモしておきたいと思う。

【CSSプロパティ】
display: block;/*ブロック要素にする*/
overflow: hidden;/*はみ出た部分は非表示*/
white-space: nowrap;/*折り返し禁止*/
text-overflow: ellipsis;/*テキストがはみ出る場合は「…」で表示*/

例えばセレクタ名にリストタグ（li）を指定してあげれば、liで囲った記事などのタイトルは、画面幅に合わせて以下のように表示されるようになる。

【表示例】
ここにタイトルが入りますここに…
ここにタイトルが入りますここに…
ここにタイトルが入りますここに…

こうなると折り返しによるデザインの崩れも心配もなく、PC・タブレット・スマホなどデバイスによる画面幅の変化にも対応できるのでよい。

画面幅が変わったときのテキストのくずれをCSSで制御する方法

槍の間合いもまだまだだな。

枯れ木も山の賑わい。