ちょっと使えるテキスト装飾 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.