【CSS】頭出し＆ちょうどいいところで自動改行

今回は、すごく「ちょっとした」テクニックをご紹介いたします。

最初にサンプルHTML載せておきますね。
https://revenue-test.biz/test_html/atama_and_autoreturn.html

■頭出し

ときどき、HTML作成時に
　■あいうえおあいうえおあいうえおあいうえ
　　おあいうえおあいうえお
というふうに、自動改行時に頭を1文字分出したい場合はありませんか？

これに関しては、すごく簡単なテクニックでできます。
　【CSS】.l_indent{ padding-left:1em; text-indent:-1em; }
　【HTML】<p class="l_indent">■あいうえおあいうえ……</p>
これでOKなんです。
右側にpadding1文字分とり、text-indentで先頭1文字分ネガティブマージンのように右側に移動させる。

本当にちょっとしたテクニックですね(^▽^;)

■ちょうどいいところで自動改行

レスポンシブサイトが多くなってきた昨今、ちょうどいい個所での改行というのが難しくなってきました。
「文章のキーワードの途中で改行してほしくないなあ…」
HTMLを組んでいたら、こういう経験も少なからずあるかと思います。

これも、簡単なテクニックで可能になります！
display:inline-block; を指定した<span>タグなどで文言を囲むと、うまいこといきます。
これに関しては、サンプルHTMLを直接見ていただいた方が早いと思います。
サンプルを開いて、Window幅を変えてみてください。
<span>で囲まれた部分が一塊になって、キーワード途中での改行がされません。

■頭出し＆ちょうどいいところで自動改行 の合わせ技

というわけで、上記２つの合わせ技もいけます。

ただし…text-indent は、子孫要素に継承されてしまうので、.l_indent * { text-indent: 0; }　とやって、text-indent をリセットしてあげる必要があります。
これを忘れると…文章が崩れてしまいますのでご注意を(笑)

こちらもサンプルHTMLをご覧ください。

すごく簡単なテクニックのご紹介でしたが、意外と使える＆使いどころのあるものなので、ご紹介いたしました。