文字の折り返しに

立ち向かう

山田 典明

よくある感じ

対策 1

inline-block を使う

<span class="inline-block">いろはにほへと</span>
<span class="inline-block">ちりぬるを</span>
<span class="inline-block">わかよたれそ</span>
<span class="inline-block">つねならむ</span>
<span class="inline-block">うゐのおくやま</span>
<span class="inline-block">けふこえて</span>
<span class="inline-block">あさきゆめみし</span>
<span class="inline-block">ゑひもせすん</span>
<span class="inline-block">色は匂へど</span>
<span class="inline-block">散りぬるを</span>
<span class="inline-block">我が世誰そ</span>
<span class="inline-block">常ならむ</span>
<span class="inline-block">有為の奥山</span>
<span class="inline-block">今日越えて</span>
<span class="inline-block">浅き夢見じ</span>
<span class="inline-block">酔ひもせず</span>

こんな感じ

https://codepen.io/noliaki/pen/zRbPRq

対策 2

font-size に vw を使う

font-size: 3vw;

ブラウザ幅によって拡縮する

https://codepen.io/noliaki/pen/zRbPjB

対策 3

br を駆使する

いろはにほへと
<br class="only-sp">
ちりぬるを
<br class="only-sp">
わかよたれそ
<br class="only-sp">
つねならむ
<br class="only-sp">
うゐのおくやま
<br class="only-sp">
けふこえて
<br class="only-sp">
あさきゆめみし
<br class="only-sp">
ゑひもせすん
<br class="only-sp">
色は匂へど
<br class="only-sp">
散りぬるを
<br class="only-sp">
我が世誰そ
<br class="only-sp">
常ならむ
<br class="only-sp">
有為の奥山
<br class="only-sp">
今日越えて
<br class="only-sp">
浅き夢見じ
<br class="only-sp">
酔ひもせず

https://codepen.io/noliaki/pen/EQMbpg

まとめ

• どのユーザーにも同じ改行位置になるとは限らない
• とはいえ、出来る限りのことは やりましょう
• 向こうは「出来ない」って答えを求めてはないです

Thank You