2014年6月13日金曜日

インライン要素に、word-break: break-all が効かない

レンダリングエンジンが Blink のみ有効で、それ以外は break-all が効いていません。

青文字が <span style="word-break: break-all">

Dragon (Blink)

Firefox (Gecko)

Internet Explorer (Trident)

Opera 最強伝説 12.16 (Presto)

Trident,GeckoBlink のどちらが正しいのか、つたない知識で考えてみたのですが、<span> 等のインライン的要素は、つらつらと流れていくだけなので、それ自身には範囲とか幅は存在しない。範囲を決めているのはそれを覆っている箱なので、解釈としては Trident や Gecko が正しいのではないかと思います。

ただ、ありがたかったのは、Blink。結局インラインに指定して期待通りに表示させることができなかったからです。


レジストリの CLSID のような長いキーが、かなり手前で折り返されてしまい、かえって不自然で読みにくくなってしまうのを防ぐために、word-break: break-all をクラスに設定していました。「段落は禁則処理で改行しても、そこに埋め込んだキーやコードだけは禁則処理をしないでほしい」というもの。

<p> や <div> などのブロック的な要素に対しては、どのブラウザでも問題無し。最近になって <span> などインライン的な要素には効果がないのに気がつきました。

word-break は継承されていくので、一つ上のブロックや <body> に設定しておけば表示できますが、それは目的が違うし、CSS では自身より上の要素のスタイルは指定できません。


ブロック的な要素は、明らかに用途が違いますが、inline-block はどうか?とやってみたところ、こんな感じになりました。

break-all は常に効いています。inline-block を赤枠で囲ってみました。

全体を1行で表示できる場合は、インラインとなんら変わりません。

幅を狭めていってinline-blockの右端が幅を超えると一段下がる。

良い感じに見えましたが、さらに短くなると、その後の文章も一段下がってしまいます。 砂の中の棒のような感じ。使いどころによっては良いかもしれないけど、ちょっと不格好。

使えるかなと思ったのは、充分に短くて単語の中に禁則文字が入っている場合。
例えば、{20D04FE0-3AEA-1069-A2D8-08002B30309D} のような値は、-(ダッシュ)が禁則文字になって変な感じに折れ曲がってしまうことがありますが、inline-block にしておくと、その中では表示範囲を超えないかぎり絶対に折れ曲がりません。

フォントサイズはユーザーが決めますし、レスポンシブなデザインなので、具体的に長さは決められないまでも、おそらく、これよりも幅は短くならないだろうと予想できるものに、<code><var>など別のタグに設定しておくといった使い方ができるかもしれません。

その他、色々な display も入れてみました。
run-in とか、どのような動作をするのか想像もできないようなものまで試しました。
大差ないというより、違いがわかりませんでした。 わかりませんでした。2回言いました。

HTML にも目を移して見たものの、タグがなんであれ、インラインかブロックかの影響しか受けなかったため、あまり関係がなかったです。 ただ、スペースは文字実体参照の &nbsp; を使用すれば、折り返しポイントとはみなされないようです。

<pre> も試してみたのですが、display: inline; を指定しようが、何をしようが我道をつらぬきます。おそらく、タグの中で最強無敵のパーフェクト超人です。
そういう目的のタグなのだから当然と言えば当然なんですけど、汎用性を考えると、使いどころの難しいタグです。

以上、インライン要素に、word-break: break-all; が効かないというお話でした。

.nonsubject { coffee-break: all-time; }