WEB掻っ穿じり

WEB備忘録とチャリとカメラ

ちょっと使えるテキスト装飾 css小技

  category:web

テキストコンテンツで、覚えておくと便利なスタイルを集めました、覚書。 掲載時から対応ブラウザに変更がある可能性があるので、使用時には随時確認が必要。

オーバーフロー制限

長いタイトルを一行に収めたい時など、自動で省略(…)をつける。

コンテナ要素からはみ出たコンテンツをtext-overflow: clip;で符号を付けずに省略、text-overflow: ellipsis;で符号(…)に付けて省略。
white-space: nowrap;で半角スペースの表示の仕方を指定。

See the Pen 20160321-001 by TOBAatsushi (@birdwing3) on CodePen.

テキストの配置

最終行のみ指定、右から左に表記されるコンテンツなどへの対応(※IE未対応)

text-align: justify;でテキストを左右マージン揃え。
text-align: start;text-align: endで右→左に書かれたコンテンツに対応。
text-align-last: right;で最終行の配置を右指定。

See the Pen 20160321-002 by TOBAatsushi (@birdwing3) on CodePen.

行の折り返し設定

半角英数字の改行指定

word-break: break-all;で半角英数字をコンテナ要素に改行して納める。

単語の分割

文字列の長い単語がコンテナ要素から溢れないように、word-wrap: break-word;で単語の途中でも改行指定。

See the Pen 20160321-003 by TOBAatsushi (@birdwing3) on CodePen.

コンテナ要素のサイズ変更

コンテナ要素よりも幅が広いテキストコンテンツを、領域を可変にする。

resize: both;で領域を可変。

See the Pen 20160321-004 by TOBAatsushi (@birdwing3) on CodePen.