CSSで両端揃え

質問

色はにほへど　散りぬるを
我が世たれぞ　常ならむ
有為の奥山　　今日越えて
浅き夢見じ　　酔ひもせず

こういう詩があったとして、「散りぬるを」と「常ならむ」を同じ幅にする、また「有為の奥山」や「浅き夢見じ」も「色はにほへど」と同じ幅にするにはどうすればいいですか？

回答No.2

aa_akiya · ベストアンサー

<style>
text-align-last: justify;
text-align: justify;
-moz-text-align-last: justify;
text-justify: inter-ideograph;
</style>

これくらいまで記載すれば、主要なブラウザでは対応可能なようです。

お礼

ありがとうございました。助かりました。

回答No.1

aa_akiya

いわゆる「均等割付」でよろしいでしょうか？
CSSのプロパティとしては「text-align-last」があります。
ただしこれには対応していないブラウザもあります。

以下のサンプルはChromeでは問題ありませんでしたが、
Edgeでは正しく表示できませんでした。

<style>
td {
width: 200px;
text-align-last: justify;
}
</style>
<table>
<tr><td>色はにほへど</td><td>散りぬるを</td></tr>
<tr><td>我が世たれぞ</td><td>常ならむ</td></tr>
<tr><td>有為の奥山</td><td>今日越えて</td></tr>
<tr><td>浅き夢見じ</td><td>酔ひもせず</td></tr>
</table>

下記サイトでは対応していないブラウザでどうしても表示したい場合に、
無理やり対応させる方法が載っています。
1文字ずつタグで囲う処理なので、
自動的に改変するプログラムでも作らなない限りは難しいかと思います。
https://q-az.net/one-line-text-justify/

お礼

ありがとうございました。助かりました。