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

我有很長的命名空間要顯示在我的文章中（如MyProject\Sub\Level），如果窗口寬度不足，我希望將它們包裝在反斜槓字符（\）上。我如何使用CSS或JS/jQuery實現這個功能？在任意非空白字符上包裝文本

要告訴一個換行符字符後允許瀏覽器，插入零寬度間隔（ZWSP）字符， U + 200B，之後的角色。在HTML標記中，可以使用字符引用'＆＃x200b;'，例如

MyProject\&#x200b;Sub\&#x200b;Level

如果通過腳本添加字符，您可以輸入字符本身，使用字符串字面\u200b。

一些舊的瀏覽器（IE 6）曾經有過這方面的問題，但現在這種方法似乎比替代方案更好，舊的<wbr>標籤（它得到了很好的支持，但現在已經混亂在新版本的IE）。

2012-09-22 19:15:45

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

word-wrap: break-word;

這是在現代瀏覽器支持的CSS3屬性：谷歌瀏覽器6時，Internet Explorer 8，Firefox 3的，歌劇10ÿ的Safari 5

Acclaration：它不會對/字符只有突破，它可以根據容器的拉伸上的字的任何字符打破。

2012-09-22 18:11:51 Nelson

一種選擇是使用圍繞\字符的軟連字符（）軟連字符允許單詞在給定點處中斷，出現只有，如果該單詞確實在此時斷開。

它也不會出現在文本中，如果它被複制和粘貼（在Chromium 19/Ubuntu 11.04中測試）;這種方法使用replace()和jQuery的html()方法具有以下HTML：

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

<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的。

顯然，你並不需要使用軟連字符上的\性格都兩側，那只是對如何可能使用的演示。

的選擇，如果你寧願避免在斷點-人物的出現，是使用相同的方法和上面，而是插入一個空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; 
}

參考文獻：

2012-09-22 18:24:47

你也許可以遵循jQuery - Find and replace text, after body was loaded的例子，並把它插入拆分以下每削減

2012-09-22 18:29:22

回答