こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSで両端揃え

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

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

投稿日時 - 2018-06-19 14:29:26

QNo.9509874

困ってます

質問者が選んだベストアンサー

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

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

投稿日時 - 2018-06-19 15:35:47

お礼

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

投稿日時 - 2018-06-19 15:46:27

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

いわゆる「均等割付」でよろしいでしょうか?
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/

投稿日時 - 2018-06-19 15:22:10

お礼

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

投稿日時 - 2018-06-19 15:46:11

あなたにオススメの質問