文字の折り返しに

立ち向かう

山田 典明

よくある感じ

微妙な位置で折り返される

対策 1

inline-block を使う

文節・単語を 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>

こんな感じ

対策 2

font-sizevw を使う

font-size: 3vw;

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

対策 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">
酔ひもせず

まとめ

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

Thank You

Made with Slides.com