在任意非空白字符上包装文本

Question

我有很长的名称空间要显示在我的文章中（如MyProject\Sub\Level），如果窗口宽度不足，我希望它们包装在反斜杠字符（\）上。我如何使用CSS或JS / jQuery实现它？

Answer 1

告诉浏览器在字符后允许换行符，在字符后插入ZERO WIDTH SPACE（ZWSP）字符U + 200B。在HTML标记中，您可以使用字符引用“，例如

MyProject\​Sub\​Level

如果您通过脚本添加字符，则可以使用字符串文字\u200b输入字符本身。

一些旧的浏览器（IE 6）曾经遇到过这方面的问题，但是现在这种方法似乎比替代方案更好，旧的<wbr>标记（它得到了很好的支持，但现在已被搞砸了）新版IE）。

Answer 2

一种选择是在­个字符周围使用软连字符（\）; soft-hyphen允许一个单词在给定点处断开，如果单词出现，则只显示 ，实际上在该点处断开。

如果复制并粘贴（在Chromium 19 / Ubuntu 11.04中测试），它也不会出现在文本中;这种方法使用replace()和jQuery的html()方法，并使用以下HTML：

<ul>
    <li>\some\text\possibly\a\path</li>
    <li>\another\path</li>
    <li>\something\else\also\quite\long</li>
</ul>​

和CSS：

li {
    width: 8em;
    border: 1px solid #000;
}​

jQuery的：

$('li').html(function(i, h) {
    return h.replace(/(\\)/g, '­$1­')
});​

JS Fiddle demo

显然，您不需要在\字符的两个侧使用软连字符，这只是可能的演示>被使用。

另一种方法是，如果您宁愿避免在断点处出现-个字符，则使用与上面相同的方法，而是插入一个空的span元素，然后给出风格display: inline-block;：

jQuery的：

$('li').html(function(i, h) {
    return h.replace(/(\\)/g, '$1<span></span>')
});​

CSS：

li {
    width: 8em;
    border: 1px solid #000;
}
li span {
    display: inline-block;
}

JS Fiddle demo

参考文献：

• html()。
• replace()。

Answer 3

在包含文本的元素中使用以下css：

word-wrap: break-word;

这是现代浏览器支持的css3属性：Google Chrome 6，Internet Explorer 8，Firefox 3，Opera 10和Safari 5.

Acclaration ：它不会仅在/个字符上中断，它可能会根据容器的拉伸而破坏单词的任何字符。< / p>

Answer 4

您可以按照jQuery - Find and replace text, after body was loaded上的示例操作，并在每个斜杠后插入一个中断