とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

スマホサイトでのテキスト折り返し位置問題。display:inline-block で文字落ちを防ぐ

スマホサイトでのテキスト折り返し位置問題。display:inline-block で文字落ちを防ぐ

スマホサイトあるある。

テキストの折返し位置が

いまいちハマらない、

おかしなところで

文字落ちしてしまうという経験、

web製作者なら誰でもあるのではないでしょうか。

 

特にレスポンシブデザインの場合、

画面幅に応じてぬるぬると

テキストが折り返し、

画像も縮小されていきますが、

画面幅によっては

テキストの折り返し位置

が残念なタイミングがでます。

 

文字が1文字だけ落ちてしまうようなかたちで

折り返しになってしまったり、文の途中で違和感

のあるかたちでの折り返しになってしまったり。

 

ここは文字落ちさせたくない

というテキストのくくり(文節)に

「display:inline-block」をかますことで、

文字落ちを回避することができます。

 

 

「display:inline-block」をつけると、

画面幅に限界がきたときに、

そのくくり(文節)ごと

段落ちしてくれます。

 

たとえば

 

吾輩は猫である。名前はまだ無い。

 

というタイトルや文章があったとします。

とある画面幅で見た場合に

 

吾輩は猫である。名前はまだ無
い。

 

とか

 

吾輩は猫である。名前
はまだ無い。

 

となることがあります。

これだと格好良くないですよね。

 

この場合「名前はまだ無い。」に

「display:inline-block」をかますと、

文字量が画面幅の限界を超えたときに

下記のようにで折り返し、段落ち

してくれるようになります。

 

吾輩は猫である。
名前はまだ無い。

 

格好よくみせたい見出し、

タイトルリード文などでは

「display:inline-block」でテキストの

レイアウトをコントロールして

テキストをデザインしましょう。

 

ほかにもさまざまな

テクニックがありますが、

下記のサイトでくわしく解説されていて

わかりやすく参考になります。

ご一読あれ。

app.codegrid.net