除了空格和連字符之外，下劃線上的CSS換行/換行符

我有一堆真正長的文件名，導致HTML格式溢出。所有這些文件名都使用下劃線而不是空格，如果它們是空格，它們會很容易打破/包裝。喜歡這個。除了空格和連字符之外，下劃線上的CSS換行/換行符

Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf

是否有某種方式來告訴CSS處理下劃線文字，好像他們是空白或連字符，因此包裝/打破下劃線嗎？喜歡這個。

Here_is_an_example_of_a_really_long_
file_name_that_uses_underscores_
instead_of_spaces.pdf

對於我而言，我不能使用腳本來做到這一點。我也不想使用word-wrap：break-word技巧，因爲如果沒有指定寬度，這通常不起作用。此外，它在文字中間任意斷裂。

謝謝。

來源

2011-06-11 dsmtoday

您可以使用標記（http://www.quirksmode.org/oddsandends/wbr.html），它可以讓瀏覽器無論您放置它的位置如何都會中斷。

所以，你的HTML應該是：

Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...

您可以將輸出HTML之前在服務器端添加此標籤。

另一種方法是實體，它是一個零寬度空間。有時這在某些瀏覽器上效果更好。

來源

2011-06-11 15:51:58 Keltex

注意，這是一個新的HTML5標籤，也不可能是100％，在所有瀏覽器 – Omer 2011-06-11 15:54:22

感謝您的回覆支持。不幸的是，我無法對文件名進行任何服務器端處理。我需要一些方法告訴瀏覽器將下劃線看作是空格或連字符。我希望能有一些CSS jujitsu可以讓我做到這一點。有點像 Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf – dsmtoday 2011-06-13 06:31:47

它不被IE8支持。 – Knu 2015-04-11 17:28:14

使用CSS

word-break: break-all

jsfiddle - code， result

來源

2013-05-29 13:33:31 hackhowtofaq

這將換行爲不包含下劃線的字符。 – rmcclellan 2014-05-29 19:29:34

這並不能解決問題，因爲它會在每個字符之後換行，而不僅僅是下劃線。 – user428747 2015-04-06 19:52:21

看來你不能爲這個目的使用CSS目前。

但是你可以使用JavaScript來自動添加標籤，例如：

var arr = document.getElementsByClassName('filename'); 
 
for(var i = 0; i < arr.length; i++) { 
 
    arr[i].innerHTML = arr[i].innerHTML.replace(/_/g, '_<wbr/>'); 
 
}

body { width: 250px; }

<a class="filename">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</a>

來源

2015-04-07 17:48:34 user

適用於HTML5我需要支持IE 8及以上版本。因此這個解決方案對我沒有幫助。不過謝謝。 – user428747 2015-04-07 21:08:32

@user，就是[fixable for IE]（http://stackoverflow.com/questions/23756932/wbr-tag-doesnt-work-in-ie），但一定要將該修補程序僅添加到IE特定的CSS（通過條件註釋），因爲在某些情況下複製時零寬度空間可能會變成全空格。但據我所知，在IE中沒有其他方法可以做到這一點。 – user 2015-04-07 22:19:24

不使用JavaScript也不可以插入 （注意空間）與下面的CSS ：

span{ 
    width: 0; 
    overflow: hidden; 
    display: inline-block; 
}

的標記：

Here_<span> </span>is_<span> </span>an_<span> </span>example...

來源

2015-04-09 14:36:24 spaark

除了空格和連字符之外，下劃線上的CSS換行/換行符

回答

相關問題