在css/js中自動換行

我正在尋找一種跨瀏覽器的方式來包裝文本的長部分，這些文本在具有預定寬度的div內沒有空格（例如，長URL）。在css/js中自動換行

這裏有一些解決方案，我在網絡上發現，他們爲什麼爲我做不工作：

溢出：隱藏/自動/滾動 - 我需要整個文本是可見而不滾動。 div可以垂直增長，但不能水平增長。
注入&害羞;通過js/server-side進入字符串 - &害羞;現在被FF3支持，但是複製並粘貼一個帶有羞澀感的網址：&;在中間不會在Safari中工作。此外，據我所知，沒有一種測量文本寬度的簡潔方法來找出最佳的字符串偏移量來添加這些字符（有一種方法很糟糕，請參閱下一項）。另一個問題是放大Firefox和Opera可以很容易地解決這個問題。
將文本轉儲到隱藏元素中，並測量偏移量 - 與上述項目相關，它需要在字符串中添加額外的字符。另外，測量長文本中所需的中斷量可能很容易需要數千個昂貴的DOM插入（每個子串長度一個），這可以有效地凍結網站。
使用等寬字體 - 再次，縮放可能會弄亂寬度計算，並且文本不能自由設置樣式。

東西，看起來很有前途，但都不太有：

自動換行：打破字 - 它現在part of CSS3 working draft，但它不是由任何Firefox，歌劇或Safari尚不支持。這將是理想的解決方案，如果它在所有瀏覽器的工作今天:(
注入<WBR>標籤串入通過JS /服務器端 - 複製和在所有瀏覽器的URL粘貼的作品，但我還是不有一個很好的方法來測量在哪裏放置中斷，並且這個標記使HTML無效
在每個字符後面加上中斷 - 它比數千個DOM插入要好，但仍然不理想（向文檔中添加DOM元素內存和減慢選擇查詢等）

有沒有人有更多的想法如何解決這個問題？

來源

2008-11-27 Leo

有一個鬆散的相關的問題在這裏textarea with 100% width ignores parent element's width in IE7

不知道是否有確鑿的解決方案被發現了，但它似乎是最接近的是字突破：突破 - 所有，這可能做的工作在互聯網爆炸。

我還發現這個http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html被埋在了我的書籤中，這表明可以解決大多數其他瀏覽器的問題，這可能會有所幫助。

如果有人來到這裏，CSS3會很棒......

希望有幫助，有興趣看看你想出什麼。對不起，我不能提供任何測試或更具體的東西。

來源

2008-11-27 04:51:44 seanb

我通常使用word-wrap和<wbr>想法的組合處理此問題。注意有幾個variants。正如你所看到的，可能是你兼容性最好的選擇。

word-wrap瀏覽器的支持並不可怕，所有的事情考慮，Safari瀏覽器，IE瀏覽器和Firefox 3.1（阿爾法版本）都支持它（src），所以我們未必全是那麼遙遠。

在問候服務器側破損，我用這個方法非常成功（PHP）：

function _wordwrap($text) { 
    $split = explode(" ", $text); 
    foreach($split as $key=>$value) { 
     if (strlen($value) > 10) { 
      $split[$key] = chunk_split($value, 5, "&#8203;"); 
     } 
    } 
    return implode(" ", $split); 
}

基本上，對於超過10個字符的話，我在每個5個字符分割。這似乎適用於我已交付的所有用例。

來源

2008-11-27 05:28:16 Owen

在PHP中使用正則表達式應該更快地分解長單詞。我創建了一個處理htmlspecialchars的函數，並且用害羞的方式分解了&;這是有興趣的人的功能。只需傳遞字符串和最大字長（如果不想用&害羞分隔字詞，則保留爲0）;它將返回一個字符串，其中包含html特殊字符轉換後的字詞，並與&分開;

function htmlspecialchars2($string = "", $maxWordLength = 0) 
{ 
    if($maxWordLength > 0) 
    { 
     $pattern = '/(\S{'.$maxWordLength.',}?)/'; 
     $replacement = '$1&shy;'; 
     $string = preg_replace($pattern, $replacement, $string); 
    } 

    //now encode special chars but dont encode &shy; 
    $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string); 

    return $string; 
}

來源

2009-02-13 22:15:53

您可以使用現在在IE7-8和FF3.5中工作的表格佈局+自動換行CSS屬性。它不會解決問題，但至少你的設計不會被打破。

來源

2009-12-03 08:28:56 Artem

Css喲！

.wordwrap { 
    white-space: pre-wrap; /* css-3 */ 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap; /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

而且我剛剛發現這篇文章 http://www.impressivewebs.com/word-wrap-css3/

所以，你應該用

.wordwrap { 
    word-wrap: break-word; 
} 

.no_wordwrap { 
    word-wrap: normal; 
}

來源

2010-07-29 08:34:25 superlogical

`自動換行：打破字;`適用於Firefox 3.5+ - 但不適用於跨度等內聯元素。（甚至不在Firefox 5.0中）你必須應用`display：inline-block;`以````````````` – crispy 2011-06-24 17:08:38

使用空白：在CSS正常如果需要自動根據身高和自動換行顯示組件的寬度希望這可能對你有幫助。

來源

2012-08-22 06:56:48 unkown

非常相似，歐文的回答，這實現了同樣的事情在服務器端一行：

return preg_replace_callback('/\w{10,}/', create_function('$matches', 'return chunk_split($matches[0], 5, "&#8203;");'), $value);

來源

2013-01-07 14:43:48 waj

這可以解決您的問題

function htmlspecialchars2($string = "", $maxWordLength = 0){ 
return wordwrap($string , $maxWordLength,"\n", true); 
}

來源

2016-07-12 06:36:37

在css/js中自動換行

回答

相關問題