CSSを使用したテキストの両端揃え

2024-02-14 19:34 CSS テキスト両端揃え

テキストの両端揃えを実現するためには、以下のいくつかの方法があります。

text-align: justify; CSSのtext-alignプロパティを使用して、テキストを両端揃えにすることができます。以下のコード例を参考にしてください。
```
.text-container {
 text-align: justify;
}
```
上記のコードでは、.text-containerというクラスを持つ要素内のテキストが両端揃えされます。
text-justify: inter-word; CSSのtext-justifyプロパティを使用して、単語単位でテキストの両端揃えを行うことも可能です。以下のコード例を参考にしてください。
```
.text-container {
 text-align: justify;
 text-justify: inter-word;
}
```
上記のコードでは、テキストが単語単位で両端揃えされます。
text-align-last: justify; CSSのtext-align-lastプロパティを使用すると、行の最後の行も両端揃えにすることができます。以下のコード例を参考にしてください。
```
.text-container {
 text-align: justify;
 text-align-last: justify;
}
```
上記のコードでは、テキストの最後の行も両端揃えされます。

これらの方法を使うことで、テキストの両端揃えを実現することができます。適用したい要素に対して適切なクラスを追加し、上記のコード例を参考にしてください。