CSSのtext-indentを使用して段落の1行目をインデントする方法

CSSのtext-indentを使用して段落の1行目をインデントする方法

最近デザインに目覚めはじめました@takahashiです。

CSSで文章の1行目を全角1文字分インデントしたい、といった場合はtext-indentを使えば一発で可能です。

 少年も残酷、少女も残酷です。
優しさなどというものは、大人のずるさと
一緒にしか育っていかないものです。

上記のように1行目だけインデントする場合に

<div style="text-indent:-1em;">
文章~<br>
文章~<br>
文章~<br>
</div>

とすれば上記のように1行目のみインデントされます。サンプルでは左パディングしています。

サンプル

コメント

タイトルとURLをコピーしました