学習者のために空白で区切られた中国語のテキストがあります。例:我喜欢学中文。
単語内に改行を挿入せずに、このテキストを HTML で表示したいと思います。また、テキストが単語間で区切られるようにしたいと思います。どうやってやるの?
Unicode Word Joiners (U+2060、HTML コード⁠
)を使用して、行間で分割してはならない文字を接続できます。
HTML
<span>我 喜&#8288;欢 学 中&#8288;文</span>
これは機能しますが、意味論的ではありません。
以下は、実際のテキストを変更せず (これはコピー/貼り付けに適しています)、CSS やその他の方法 (HTML タイトル、JavaScript) を使用してフォーマットし、インタラクティブにすることができるため、はるかに優れています。
span.chineseWord {
white-space: nowrap;
padding: 0px 5px;
}
span.chineseWord:hover {
background-color: yellow;
}
<span class="chineseWord">我</span>
<span class="chineseWord">喜欢</span>
<span class="chineseWord">学</span>
<span class="chineseWord">中文</span>
通常のスペースの代わりに改行なしスペース (U+00A0) を使用すると、スペースが必要な特定の場所での改行をほとんど防ぐことができます。(ブラウザは改行なしのスペース セマンティクスを完全に一貫して実装しているわけではないため、「ほとんど」と書きました。) しかし、中国語のテキストでこれを行うと、最近のブラウザでは、スペースが使用されていない位置でブラウザが中国語の文字間で改行するだけです。
最近のブラウザは通常、Unicode 改行規則の一部を実装しています。この規則では、特定の規則で禁止されていない限り、通常は漢字間の改行が許可されると定義されています。
テキストのセグメント内ですべての改行を防止したい場合、最も効果的な方法は、タグ<nobr>
と</nobr>
その周囲を平手打ちすることです。標準に準拠したい場合は、機能をいくらか失うことを犠牲にして、セグメントを のような要素にし、CSS でspan
割り当てます。white-space: nowrap
このようなセグメント内の特定の位置で改行を許可する場合は、(空の) タグ<wbr>
または U+200B 文字 (たとえば、 と書くことで含めることができます​
) を使用します。