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; }