Question

CSS / HTML中是否有任何方法可以更改哪些字符导致文本中的换行符被允许？例如，如果我有包含文本“fooooooo / barrrrrrrrr”的表数据，它将不会分成两行，但如果它包含“fooooooo barrrrrrrrr”，它将会。

有没有办法在可以触发换行符的位置添加标点符号？

Answer 1

CSS / HTML中无法更改导致，允许或阻止文本中的换行符的字符集。但是，可以根据角色的每个出现来影响这些事情。也就是说，一般情况下你不能说“允许'/'之后的换行符”，但你可以在特定的“/”之后注入一些标记或内容以允许在那里换行。

请注意，浏览器具有不同的换行行为。例如，Opera将斜杠“/”视为允许后面的换行符。行为还可能取决于上下文。请参阅line breaking in browsers上的我的页面。

对于任何了解实用方法并且不太担心标准化者不愿意接受它的人来说，过去认为这很简单：<wbr>标签。它仍然是一种简单实用的方法，例如， fooooooo/<wbr>barrrrrrrrr，但它不再是最常用的跨浏览器方式。更新的方式，零宽度空间U + 200B，可以在HTML中写成，在现代浏览器上运行良好，但在一些旧版本的IE上，它会造成混乱（显示一个小矩形）这个控制字符出现的地方）。

如果您愿意使用稍微冗长的代码，可以将这两种方式结合起来。您可以同时使用<wbr>和内联元素，其内容为空，但零宽度空间为生成内容。这避免了IE 6上的问题，因为它不支持CSS中生成的内容（但识别<wbr>标记）。例如：

fooooooo/<wbr><a class=wbr></a>barrrrrrrrr

使用CSS代码

.wbr:after { content: "\00200B"; }

测试和演示：jsfiddle。

Answer 2

不，但是有Unicode字符（最值得注意的是，U + 200B ZERO WIDTH SPACE），它允许在指定点进行换行而不插入任何可见的字符或空格。

Answer 3

你可以使用css word-wrap property，这样你的长词会根据其容器宽度而被破坏：

word-wrap: break-word;

Answer 4

无法告诉浏览器允许包装特定字符。

CSS3 word-wrap: break-word;属性将允许您在任何字符上打破行，从而为您提供部分支持。如果文本长于其包含元素的计算最大宽度，则会发生这种情况。

如果你动态生成HTML输出服务器端，你可以进行正则表达式搜索并替换以在你想要的字符（可选地）换行之前插入空格，但是在不知道上下文的情况下，很难更加具体。

Answer 5

作为替代方案，我过去曾使用过以下内容：

<span style="display:block;float:left;" />

或者更好的是在你的css中定义：

.shy { display:block; float:left; }

然后使用：

<span class="shy" />

因此，无论您将上述内容放在一串字符中，如果需要，它都将作为一个中断。

stringthathasnospaceswhatsoever<span class="shy" />willbreakjustjustatthespan.

HTML更改换行符触发器？

5 个答案: