CSS/HTML 中是否有任何方法可以更改哪些字符导致文本中的换行符被允许？例如，如果我有包含文本“fooooooo/barrrrrrrrr”的表格数据，它不会分成两行，但如果它包含“fooooooo barrrrrrrrr”，它会。
有没有办法将标点符号添加到可以触发换行符的内容中？
问问题
4418 次
5 回答
10
在 CSS/HTML 中无法更改导致、允许或阻止文本换行符的字符集。但是，每次出现一个字符都可能影响这些事情。也就是说，您不能笼统地说“允许在 '/' 之后换行”，但您可以在特定出现的“/”之后注入一些标记或内容以允许在那里换行。
请注意，浏览器具有不同的换行行为。例如，Opera 将斜杠“/”视为允许在其后换行。行为也可能取决于上下文。请参阅我在浏览器中换行的页面。
对于任何知道实用方法并且不太担心标准化者不愿意接受它的人来说，认为过去很简单：<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。
于 2012-11-05T06:14:34.703 回答
4
不，但是有 Unicode 字符（最值得注意的是，U+200B 零宽度空格）将允许在指定点换行，同时不插入任何可见字符或空格。
于 2012-11-04T23:33:55.993 回答
4
您可以使用css word-wrap 属性，以便您的长字根据其容器宽度被破坏：
word-wrap: break-word;
于 2012-11-04T23:34:38.313 回答
1
没有办法告诉浏览器允许对特定字符进行换行。
CSS3属性将通过允许在任何字符word-wrap: break-word;上换行来帮助您到达那里。如果文本长于其包含元素的计算最大宽度，则会发生这种情况。
如果您在服务器端动态生成 HTML 输出，您可以进行正则表达式搜索和替换，以便在您想要（可选）换行的字符之前插入一个空格，但是在不知道上下文的情况下，很难更具体关于那个。
于 2012-11-04T23:57:41.443 回答
0
作为替代方案，我过去使用过以下内容：
<span style="display:block;float:left;" />
或者更好的是在你的css中定义这个：
.shy { display:block; float:left; }
然后使用：
<span class="shy" />
因此，无论您将上述内容放在字符串中的何处，如果需要，它将充当中断。
stringthathasnospaceswhatsoever<span class="shy" />willbreakjustjustatthespan.
于 2012-11-04T23:46:08.857 回答