読者です 読者をやめる 読者になる 読者になる

やったこと

webサービスを作るときに考えたことを垂れ流します

word-breakの折り返しがひどい件!

cssの「word-break: break-all;」を使って文章を折り返したかったのですが、一部のケースで折り返しをうまくやってくれないみたいです・・。

例えば以下のようなhtmlを記述します。

  <div class="test_div">
    <p class="test_p">ワロタwwwwwwwwwwwwwww!!!!!!!!!!!!!!!</p>
  </div>


そしてcssには「word-break: break-all;」を指定します。

↓上記を表示した結果、こんな情けないことに・・・

f:id:absg:20160822175825j:plain
(※ブラウザはChromeです)

どうも「!」みたいな記号が含まれていると、ちゃんと右端で折り返してくれずにはみ出してしまうみたいですね。

仕方がないのでcssには「word-wrap: break-word;」を指定することにしました。

↓以下が表示例です。

f:id:absg:20160822180136j:plain

このようにワード単位の折り返しにすれば、ワクからはみ出すことはなんとか回避できそうです。

現状では日本語をきっちり右端まで詰めて折り返すのは無理なんでしょうかね?

こんなこと簡単にできそうなのに、意外とまだ対応されていないんですね・・。