UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【CSS】テキストの均等割り当て

以下のようにテキストを左寄せではなく、均等に割り当てを行いたい

f:id:uggds:20210808113822p:plain:w300

このときtext-align: justifyを利用すればできると思っていたができなかったので調査した

https://www.w3.org/TR/css-text-3/#text-align-property

仕様をみるとtext-align-lastで特に指定されていない限り、改行前の最後の行またはブロックの終わりは開始整列(左寄せ)になるとある

つまり、一行の場合はtext-align-last: justifyも一緒に利用しなければならないことがわかった

f:id:uggds:20210808113837p:plain:w300

試しに複数行にすると下のようになった

f:id:uggds:20210808132014p:plain:w300

この場合は最終行が間延びしたか感じになるので、text-align-last: justifyは不要で1行と複数行で使い分けが必要そう

他参考

fromkato.com