※この文章のように長い一文を折り返したときにコメマークの下から二行目が始まってしまうのを防ぐのが今回のブログのテーマです。
↑こうなってしまう方へ！(私も数ヶ月前にやり方わかりましたので共有します笑)
目次
indentとpaddingを使って解決
p {
text-indent: -1em;
padding-left: 1em;
}
こちらのコードを冒頭の赤字の一文に貼ってみましょう
See the Pen GGNwPe by kawashima (@kawashima) on CodePen.
そうすると、今回の場合の「※」一文字分(1em)が最初の行以外すべてにインデントされました。
これは、文の最初の1文字分のインデントをマイナスにする(text-indent: -1em;)ことで、文の開始1文字が左に移動します。
このままでは画面からはみ出るので、この文全体(今回はpタグ)のpadding-leftを1em追加します。
そうすることで文全体が右に1文字移動したので2行目以降が1文字インデントしたように表現できます。
これは<li>タグでもよく使われますね。
「※」は1emですが、「① はじめに」など、スペースが入る場合ははtext-indent、padding-leftともに1.2emとか小数点つけて調整してみてください。
コメント