1

我有一些中文文本已用空格分隔，以供学习者使用。例如我喜欢学中文。

我想在 HTML 中呈现这个文本，而不是在单词中引入换行符。我还希望文本可以在单词之间中断。我怎样才能做到这一点？

4

3 回答 3

5

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

HTML

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

这有效，但不是很语义化。

以下要好得多，因为它不会更改实际文本（这对复制/粘贴很有用），并且您可以使用 CSS 和其他方法（HTML 标题、JavaScript）对其进行格式化并使其具有交互性：

span.chineseWord {
  white-space: nowrap;
  padding: 0px 5px;
}
span.chineseWord:hover {
  background-color: yellow;
}
<span class="chineseWord">我&lt;/span>
<span class="chineseWord">喜欢</span>
<span class="chineseWord">学&lt;/span>
<span class="chineseWord">中文</span>

于 2012-05-13T14:18:34.570 回答
2

使用不间断空格 (U+00A0) 而不是普通空格，您可以在很大程度上防止在您希望有一些空间的特定位置出现换行符。（我写了“大部分”，因为浏览器并不十分一致地实现不间断空格语义。）但是在中文文本中这样做只会让浏览器在没有使用空格的位置在中文字符之间断行 - 在现代浏览器上。

现代浏览器一般会实现部分Unicode 换行规则，它定义了汉字之间一般允许换行，除非有特定规则禁止。

如果您希望防止一段文本中的所有换行符，那么最有效的方法是拍打标签<nobr>并</nobr>围绕它。如果您希望以牺牲一些功能为代价来符合标准，请将该段设置为一个元素，例如，并在 CSS 中span分配给它。white-space: nowrap如果您希望允许在此类段内的特定位置换行，请使用（空）标签<wbr>或 U+200B 字符（例如，您可以通过写入 来包含它&#x200b;）。

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

于 2012-05-13T17:35:56.593 回答
0

在这个问题发布几年后，word-break: keep-allFirefox 15 和 Chrome 44 终于支持了。这将是 OP 想要的：

.text {
  word-break: keep-all;
  
  resize: both;
  overflow: hidden;
  border: 1px solid #aaa;
}
<div class="text">我 家 的 后面 有 一个 很大 的 园 ， 相传 叫作 百草园 。 现在 是 早已 并 屋子 一起 卖 给 朱文公 的 子孙 了 ， 连 那 最 末次 的 相见 也 已经 隔 了 七八年 ， 其中 似乎 确凿 只有 一些 野草 ； 但 那时 却是 我的 乐园 。&lt;/div>

于 2021-09-09T09:28:38.247 回答