【CSS】1行目に中点があった時に2行目から1文字分空白を空けるCSS【文字組み】

Webサイトに文章を入れていると、1行目に中点を使うことがよくあります。
レスポンシブサイトなどでウインドウサイズが変わると、文字の改行位置も変わるため2行目以降がガタガタとなることもしばしば。

2行目以降も中点分のスペースを確保するため、CSSで調整を行います。

p.example {
padding-left: 1em;
text-indent: -1em;
}

インデントを適用させたい部分に上記2行のCSSを記述すると2行目以降の行頭に1文字分の空白ができます。

レスポンシブなサイトでは必須な設定ですね。