箇条書き等でテキストを記述した場合、2行目以降が連番と同じ先頭位置から表示される。連番がテキストと同じ位置なので、区切れが分かり難くなり見づらい、これをCSSで解消する方法。
適用前
1.あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ
2.アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワ
適用後
1.あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ
2.アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワ
HTML記述
1 |
<p class="text_wrapping">テキスト文</p> |
CSS記述
1 |
.text_wrapping {padding-left:1.3em; text-indent:-1.3em;} |
CSS補足:空けるスペースには、pxも使える。この例では、プロポーションフォントなので、連番の後の「.」で狭くなっているため。