皆さん、こんにちは！
LikePayのCTO、セルゲイです。今日は話題の日本語の改行の問題と、その解決策についてお話したいと思います。
以下の画像に表示されている問題はあったことがありますか？
それは一番悪い状態でもないです。たまに一文字だけ改行されることがあります。それは最悪です。
我々は２つの解決策を考えてきました。両方はそれぞれの長所と弱点があります。順番でお話したいと思います。
解決策その1：ラッピング
最初の解決策は、途中で改行されて欲しくない単語をspanのタグでラッピングすることでした。その場合は、このようなソースコードを書きました。
HTMLコード:
そのコードの効果は？今のところは、０です！効果がでるために、spanのタグに特別なスタイルを設定する必要があります。
CSS コード:
それによって、何ができたのでしょうか？このスタイルが適用された時点から、span のタグは、同時にblockとinlineの要素のように表示されます。スペースが足りている場合、要素はブロックとして1行に並んでいます。ただ、スペースが足りない場合は、ブロックは全て改行されます。
このようなイメージです。
いいところ は、効果があるということだけです。
悪いところは、 不要のコードが多いですし、ある程度で決まったコードの構成を守る必要があります。そしてspanタグの間にある不要のスペースがある（こちらの対策も本当はあります）。
解決策その２：ソフトな改行
2番目の解決策は、この間新しく考えてきました。まだ実際に我々のサイトやアプリに導入していませんが、この解決策がこの記事を書くきっかけになりました。
この解決策の基礎には、改行しても良さそうなとことでwbrのタグを使用するこちがあります。
もともと、このタグは日本語に適用されていないので、もう一つのスタイルが必要になります。
今回はwebページの基礎の基礎となるbodyのタグに新しいスタイルを適用します。そのおかげで、中にあるすべてのタグに遺伝されます。
HTMLコード:
CSSコード:
その結果、望んでいた通りに改行されるようになりました：:
いいところ は、綺麗でわかりやすいコードが出来上がります。そして、改行も正しいところにしかされなくなります。
悪いところ は一所懸命考えても思いつかなかった. :-)
最後に
この記事は皆さんに役立つと嬉しいです。質問などがあるましたら、気軽に連絡してください。お待ちしています！
