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

Question

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

Answer 1

要告诉浏览器在字符后允许换行，请在字符后插入零宽度空格 (ZWSP) 字符 U+200B。在 HTML 标记中，您可以使用字符引用 `​'，例如

MyProject\​Sub\​Level

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

一些旧的浏览器（IE 6）曾经有这个问题，但现在这种方法似乎比替代方法更好，旧<wbr>标签（它得到了很好的支持，但现在在新版本的 IE 中被搞砸了）。

Answer 2

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

word-wrap: break-word;

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

Acclaration : 它不会/只在字符上断，它可以根据容器的拉伸在单词的任何字符上断。

Answer 3

­一种选择是在字符周围使用软连字符 ( ) \；软连字符允许单词在给定点中断，只有当单词确实在该点中断时才会出现。

如果被复制和粘贴，它也不会出现在文本中（在 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 小提琴演示。

显然，您不需要在字符的两侧使用软连字符，\这只是演示如何使用它。

如果您不想-在断点处出现字符，另一种方法是使用与上述相同的方法，但插入一个空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 小提琴演示。

参考：

• html().
• replace().

Answer 4

您可能可以按照jQuery 上的示例 - 加载正文后查找和替换文本并让它在每个斜杠后插入一个中断