上図は Firefox で『位置』と『:』ではなく
『位』と『置:』の間で改行される様子です。

ブラウザ幅、単語の切目、書体、文字サイズ、文字間など、
テキストの改行位置は様々な要因から自動で決定されます。
そのため、文節と改行位置にこだわりがある場合は、
改行位置を細かくコントロールする工夫が必要です。

上記の動画は OS X 10.9 + Firefox 38 で
ブラウザの幅を縮めた場合の改行位置の変化です。

上下に同じテキストを並べています。
上側はブラウザの自動レイアウトに任せたもので、
『位置:』の切れ目がちょっと不自然になります。
下側は改行位置を細かくコントロールしたもので、
幾分不自然さが緩和されていると思います。

英文であれば単語の区切りが明快であるため、
ブラウザの基本動作として単語単位で自然な改行が可能です。
それでも長大な単語だけは見切れたり、横スクロールが
発生する可能性があるため、そのような単語に対しては、
例外として、単語中での改行を許可することもできます。
これは以下のように CSS のみで設定可能です。


* { word-wrap: break-word; }


これにより、見切れること無く、それでいて
英文に対する改行を自然な形にすることができます。

ところが、日本語ではそのようなことはできません。
単語の境界を機械的かつ明確に判別できないため、
ブラウザや CSS のみでは自然な改行が難しいのです。

英文同様に改行位置を自然にするためには、
単語の境界を HTML 内で示す必要があります。
動画の下側では文章を3つのワードに分けています。
ワードの境目が改行の目安として機能します。


.words {
float: left;
max-width: 100%;
word-wrap: break-word;
}



<div>
<div class="words">Firefoxのレンダリングエンジンの自動改行</div><div class="words">位置:</div><div class="words">Hello Firefox</div>
<div class="clearfix"></div>
</div>


例えば、上記のように CSS と HTML を書きます。

『float: left;』によって、なるべく少ない
行数になるようにワードを詰めていきます。

『max-width: 100%;』によって、横スクロールが
発生しないようにワードの最大幅を制限します。

『word-wrap: break-word;』によって、
横スクロールが発生しないように、ラテン文字や
アラビア数字が連続する長大な文字列は途中改行を許可します。

細部まで改行の目安 (=ワード) を明記
することは現実的ではありませんから、
長文に適用できる方法ではありません。

本来は文章の折り返し位置がドコであっても良い
ような構成を考えるべきなのですが、
どうしても、改行位置をコントロールしたい
という場面ではこのような方法で解決できるかもしれません。

どうしても、ブラウザ間で折り返し位置を揃えたり
読みやすい位置で改行したい場合など
解決のヒントになれば幸いです。

ちなみに、
『Firefoxのレンダリングエンジンの自動改行位置:Hello Firefox』
を表示したブラウザを動画のように幅縮小していくと
Firefox とその他のブラウザでは改行位置がそろいません。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。