我有一個360px寬的HTML表格，非常好用。挑戰(zhàn)在于，有時一個url會在文本中出現(xiàn)http://this/is/a/really-really-really-really-really/long/URL。這將導(dǎo)致表格水平擴展，并在底部出現(xiàn)一個滾動條。

我不認為溢出:隱藏將工作，因為一半的文本將被隱藏。

在CSS中強制斷開斜線(/)和破折號(-)的最好方法是什么(希望如此)？

它應(yīng)該可以與IE7+，Chrome，F(xiàn)irefox和Safari兼容。

使用Rails 3和jQuery。

使用& ltwbr & gt每個/前的斷字機會元素。見下面延伸閱讀中的第一個鏈接。

詳細信息(2014年的原始信息) 而css自動換行:break-word；確實有效，但是它的實現(xiàn)在不同的瀏覽器之間是不同的。

如果您控制了內(nèi)容并想要精確的斷點，您可以插入

a & ltwbr & gtword break(除I E8 can use . com外所有主流瀏覽器均支持)； & amp#8203;零寬度空格(U+200B) -在IE & lt=6 & amp害羞；軟連字符——雖然這在斷開時增加了一個連字符，但這并不總是我們想要的。 我有一個仍然必須使用IE8的大型企業(yè)用戶群，所以當我遇到這個問題時，我使用了C# someString。替換("/& quot；，& quot/& amp；#8203;")在服務(wù)器端代碼中。

抓住:如果你在電子郵件地址中插入一個零寬度的空格，當用戶復(fù)制并粘貼到他們的電子郵件客戶端時，空格也被復(fù)制，電子郵件將失敗，用戶無法知道為什么(空格是零寬度...)

參考 堆棧溢出 http://www.quirksmode.org/oddsandends/wbr.html-舉例說明 進一步閱讀 https://developer . Mozilla . org/en-US/docs/Web/HTML/Element/wbr #示例 https://developer.mozilla.org/en-US/docs/Web/CSS/word-break https://developer . Mozilla . org/en-US/docs/Web/CSS/overflow-wrap https://Kenneth . io/blog/2012/03/04/word-wrapping-hypernation-using-CSS/(2012年3月) https://css-tricks.com/almanac/properties/w/word-break/(2012年9月) https://css-tricks.com/almanac/properties/h/hyphenate/(2011年9月) 你可以使用自動換行:斷字；像這樣:

div {
        width : 50px;
        border : 1px solid #000;
        word-wrap : break-word;
    }

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

如果您真的不關(guān)心分隔符發(fā)生在哪里，最簡單的方法是添加樣式overflow-wrap:break-word；。這將允許長單詞斷開，而不影響其他單詞的斷開。

但是，如果你想在特定的字符，如斜線字符，你不能用CSS這樣做，你必須在HTML中這樣做。如果您可以訪問HTML代碼，您可以選擇以下任一解決方案:

& ltwbr & gt分詞機會標簽 & amp#8203;零寬度空間 & ampZeroWidthSpace零寬度空間 但是您并不總是能夠訪問HTML代碼。某些web應(yīng)用程序不允許您在某些字段中輸入代碼；例如，WordPress會過濾掉你在文章標題中輸入的任何代碼。在這些情況下，您可以直接插入零寬度空格字符。一種方法是使用字符查看器(Mac)或字符映射表(Windows ),盡管當涉及到空格時使用起來有些棘手，因為空格是不可見的。在字符查看器中，當您搜索arrow時，會出現(xiàn)許多匹配項，但是當您搜索零寬度空格時，似乎沒有找到任何字符。但是如果你點擊下面第二張圖片中藍色方塊的位置，你會發(fā)現(xiàn)這個角色被找到了，只是看不見而已。

另一種直接插入零寬度空格字符的方法是從其他地方復(fù)制并粘貼一個。下面兩個散列符號之間是一個零寬度空格字符。只需復(fù)制散列符號，將它們粘貼到需要零寬度空格的地方，然后小心地刪除符號，不要刪除它們之間的不可見字符。

#?#

演示這些不同方法都有效的片段:

h1 {
  width: 15rem;
  border: 1px solid black;
}
.b {
  overflow-wrap: break-word;
}

A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars&#8203;/&#8203;Workshops</h1>
<h1>Seminars&ZeroWidthSpace;/&ZeroWidthSpace;Workshops</h1>
Breaking with HTML: character-based solution (zero width space characters have been inserted directly both before and after the slash)
<h1>Seminars?/?Workshops</h1>