在html中防止空格分隔中文文本中的换行符

时间:2012-05-13 14:13:37

标签: html css

我有一些中文文本,为了学习者的目的而用白色空格分隔。例如。我喜欢学中文。

我想以HTML格式呈现此文本,而不会在单词中引入换行符。我也希望文本可以在单词之间断开。我怎么能这样做?

2 个答案:

答案 0 :(得分:4)

您可以使用Unicode Word Joiners (U+2060, HTML Code ⁠)来连接不应在行之间断开的字符。

HTML

<span>我 喜&#8288;欢 学 中&#8288;文</span>

这可行,但不是很语义。

以下内容要好得多,因为它不会更改实际文本(这适用于复制/粘贴),您可以使用CSS和其他方法(HTML标题,JavaScript)对其进行格式化并使其具有交互性: / p>

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>

答案 1 :(得分:2)

使用不间断空格(U + 00A0)代替普通空间,您可以主要防止在您希望有一些空间的特定位置换行。 (我写的是“大部分”,因为浏览器不能完全实现无中断空间语义。)但是,在中文文本中这样做只会使浏览器在现代浏览器上没有空间的位置中断汉字。

现代浏览器通常实现Unicode line breaking rules的一部分,它定义中文字符之间通常允许换行符,除非特定规则阻止。

如果您希望在文本片段中阻止所有换行符,那么最有效的方法是在其周围拍打标记<nobr></nobr>。如果您希望以符合标准的方式执行某些功能损失,请将该段设置为span,并在CSS中为其分配white-space: nowrap。如果您希望在此类细分中的特定位置允许换行,请使用(空)标记<wbr>或U + 200B字符(您可以通过编写&#x200b;来包含该字符。)

更多信息:http://www.cs.tut.fi/~jkorpela/html/nobr.html