dポイントプレゼントキャンペーン実施中!

例えば、
<td style="width: 100px;">apple banana apple banana apple banana apple banana</td>
なんてソースを作ると、実際は

apple banana apple
banana apple banana

などと単語単位で改行してくれるのですが、日本語だと

インターネット りんご プロ
グラム ブラウザ バナナ ス
タイルシート

のように単語の途中で改行されてしまいます。
英単語のように日本語を扱えないものでしょうか?
もし必要ならhtml.CSS以外の言語でも構いません。

お分かりになる方いましたら、ご回答願います。

A 回答 (4件)

日本語の単語を単語の途中で改行させないということですね。


そもそも、日本語自体が単語間の改行を許している言語なので、これを指定するのは日本語の文法的には間違いなのですが、方法がないわけではありません。
 ここでは、いちいち<span>にclassを指定するのも面倒なので、そうしたい段落について指定します。
<p class="nowrap">
<span>アセロラ </span>&#x200b;<span>アボカド </span>&#x200b;<span>グアバ </span>&#x200b;<span>ドラゴンフルーツ </span>&#x200b;<span>ドリアン </span>&#x200b;<span>パイナップル </span>&#x200b;<span>パッションフルーツ </span>&#x200b;<span>バナナ </span>&#x200b;<span>パパイヤ </span>&#x200b;<span>ペピーノ </span>&#x200b;<span>マンゴー </span>&#x200b;<span>マンゴスチン </span>&#x200b;<span>レイシ
</p>
スタイルシートは、
p.nowrap span { white-space: nowrap; }
です。
 HTMLのどのDCUMENT TYPEにもありませんが、<NOBR>を使ってもIEやfirefox,operaなどで解釈はされますが、使わないほうが良いでしょう。
    • good
    • 0

CSSで単語毎に white-space: nowrap; を設定。

 他にもfloatで出来るけど面倒です。
--------------------------------------
.aaa span{ white-space: nowrap; }


<table class="aaa">
<tr>
<td style="width: 200px;">
<span>インターネット</span>
<span>りんご</span>
<span>プログラム</span>
<span>ブラウザ</span>
<span>バナナ</span>
<span>スタイルシート</span>
</td>
</tr>
</table>
--------------------------------------
    • good
    • 0

ひとつ説明するのを忘れてました。


&#x200b;はzero-width spaceで画面上はゼロ幅なので表示されませんが、空白文字として機能するunicodeです。これを入れることで、単語間の全角スペースの手前で改行されて、行頭に全角スペースが来ることを排除しながら折り返し位置の判別のために入れたので、なくても良いはずです。
    • good
    • 0

無理。


ただし空白が半角
あるいは(ブラウザによるけど)句読点があるとやってくれる事があるね。

それ以外ではもう、javascriptによってすんごい無理矢理やるしかない。
労力に見合わない方法だし美しくないと思うよ。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!