display: inlineと自動的な折り返し

質問

display: inlineで<div>要素を並べています。
<div>要素中の文字が中途半端に改行されてしまいます。
<div>要素にwhite-space: nowrap;を指定すると、全体が一行になってしまいます。（ウィンドウサイズによって改行されない）

大変お手数ですが、よろしくお願いいたします。

イメージ例：
アップル　マイクロソフト　インテル　グー
グル　ソニー　ノキア

質問　グーグルを自動的に折り返しを禁止したいです。

回答No.3

ORUKA1951 · ベストアンサー

DIVは、HTMLに用意されている要素だけでは文書構造を示しきれないときに使用するものです。
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」

例えば、アップル　マイクロソフト・・・がその文書の中で、何であるかを示す適当なタグがない場合でちょっと特別扱いをしたいのでしたら・・、
<abbr class="makerName" title="Apple">アップル</abbr>、<abbr class="makerName" title="microsoft">マイクロソフト</abbr>、<abbr class="makerName" title="Intel">インテル</abbr>、<abbr class="makerName" title="google">グーグル</abbr>、<abbr class="makerName" title="sony">ソニー</abbr>、<abbr class="makerName" title="Nokia">ノキア</abbr>
とか・・・abbrは、略称や頭文字をマークアップするタグです。
あるいは、
<span class="mark">アップル</span>、<span class="mark">マイクロソフト、<span class="mark">インテル</span>、<span class="mark">グーグル</span>、<span class="mark">ソニー</span>、<span class="mark">ノキア</span>
あるいは、HTML5だと、他から参照される可能性のある語句(要素)を示す<mark>がありますから
<mark>アップル</mark>、<mark>マイクロソフト、<mark>インテル</mark>、<mark>グーグル</mark>、<mark>ソニー</mark>、<mark>ノキア</mark>
かも知れません。

　それをスタイルシートで
abbr.makerName{white-space:prewrap;}
span.mark{white-space:prewrap;}
mark{white-space:prewrap;}
と指定すれば良いでしょう。

CSS2.1のwhite-spaceプロパティの値は、
normal | pre | nowrap | pre-wrap | pre-line | inherit
です。

もちろん、DIVが「文書構造を示すために使われているのでしたら」
<div class="note">
　<p>パソコンメーカーには<span>アップル</span>、<span>マイクロソフト、<span>インテル</span>、<span>グーグル</span>、<span>ソニー</span>、<span>ノキア</span>などがある。</p>
　<dl>
　　<dt>アップル</dt>
　　<dd>
・・・【中略】・・・
でしたら、
div.note span{white-space:nowrap;}
ですむわけです。

　要は「折り返して表示したくない」と言うことは、それらの単語がその文書にとって何らかの特別な要素であるわけですから、HTMLのルールとして文書構造をマークアップしておかなければなりません。・・・決してデザインのためではありません!!!
　そして、「折り返して表示したくない」場合は、その文書構造に基づいて、これらのもテキストは折り返さないようにデザインするわけです。
★この基本をしっかり理解しておきましょう。

回答No.2

naokita

・何故、divなのか意味不明・・・　それはリストじゃないの？
・日本語は右端で折り返すので、単語か文章か判断せずに改行される仕様。
　（新聞だって単語でも漢字でも途中で改行してますけどね・・・）

＞中途半端　？
単語単位で改行させたくないという意図なら、

<ul class="com">
<li>アップル</li>
<li>マイクロソフト</li>
<li>インテル</li>
<li>グーグル</li>
<li>ソニー</li>
<li>ノキア</li>
</ul>

ul.com li{ display: inline; white-space: nowrap;}

回答No.1

tracer

display:inlineやdivなどの要素は一切関係ありません。
日本語ではできないのです。
印刷を目的にしたワープロなどのソフトでは、「禁則処理」という機能で調整ができますが、現在のWebブラウザには日本語の禁則処理が実装されていません。英語ならできますよ。