在 html div 中用逗号而不是空格将单词括起来

Question

我需要使用逗号（，）换行文本。有没有办法使用 CSS 或其他方法来做到这一点。

Nomal A1, High A2(4), Low A3

如果空间不够，应该这样换行，逗号应该是唯一的换行位置。

Nomal A1, High A2(4),
Low A3

这不应该这样包裹

Nomal A1, High A2(4), Low
A3

Answer 1

将每一对包裹在跨度中，并设计它们不要破裂，就像这样。

HTML

<div class="paired-text">
<span>Nomal A1,</span> <span>High A2(4),</span>
        <span>Low A3</span>
</div>

CSS

.paired-text span{ white-space: nowrap; }

或者，您可以在要粘在一起的每对单词之间呈现不间断空格 (

&nbsp;

)。不过，我更喜欢我提供的第一个想法，它更干净。

Nomal&nbsp;A1, High&nbsp;A2(4), Low&nbsp;A3

有点丑，但是代码少了。

Answer 2

最安全的方法是使用

nobr

标记（它从未出现在任何规范中，但始终是最可靠的方法）：

<nobr>Nomal A1,</nobr> <nobr>High A2(4),</nobr> <nobr>Low A3</nobr>

使用更详细的

span

标记和 CSS 代码

white-space: nowrap

几乎同样可靠，但自然会失败，例如当浏览器中禁用 CSS 支持时。

Answer 3

虽然 CSS 有

word-wrap

属性，但没有基于字符换行的选项。一般来说，CSS 仅限于样式。

您需要使用可识别视口并可以操作 DOM 的客户端技术（即 JavaScript）来完成此操作。

Answer 4

使用

<wbr>

代替

%nbsp;

或

<nobr>

。

<wbr>

与

<br>

类似，但只会在必要时触发。

只需将所有逗号

","

替换为

",<wbr>"

。