Skip to content

Latest commit

 

History

History
32 lines (23 loc) · 1.13 KB

flush-right.md

File metadata and controls

32 lines (23 loc) · 1.13 KB

行末揃え

行頭揃え(flush right)は行揃えの方法のひとつで、各行の文字列を行末で揃えるものです。文字列の長さが行の長さに満たない場合は行頭側に空きができるため、段落全体では行頭が不揃いになります。

行末揃え

実践

CSSで行末揃えにするには、text-alignプロパティでrightを指定します。縦書きの場合も同様です。

p {
  text-align: right;
}

なお、letter-spacingプロパティで0以外の数値を指定している場合、各文字のボディの右側(縦書きでは下側)のスペースが調整されるため、行末が行を含むブロックの右辺(縦書きでは下辺)とぴったり合わなくなります。これを解消するには要素のmargin-rightプロパティで相殺する必要があります。

p {
  text-align: right;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
}

関連項目