在css / js中自动换行
我正在寻找一种跨浏览器的方式来包装文本的长部分，在预定宽度的div内没有空格（例如长URL）。
以下是我在网上find的一些解决scheme，以及为什么他们不适合我：
- 溢出：隐藏/自动/滚动 – 我需要整个文字是可见的而不滚动。 div可以垂直增长，但不能水平增长。
- 注射＆害羞; 通过js /服务器端 – ＆害羞的string ; 现在被FF3支持，但是用一个＆shy复制和粘贴一个URL; 在中间不会在Safari中工作。 此外，据我所知，没有一个简单的测量文本宽度的方法来找出最好的string偏移量来添加这些字符（有一个方法，见下一个项目）。 另一个问题是，放大Firefox和Opera可以很容易地打破这一点。
- 将文本转储到一个隐藏的元素并测量与上面的项目相关的offsetWidth ，它需要在string中添加额外的字符。 另外，测量长文本所需的中断量可能很容易需要数千个昂贵的DOM插入（每个子串长度一个），这可以有效地冻结站点。
- 使用等宽字体 – 再次，缩放可能会弄乱宽度计算，并且文本不能自由地被称呼。
看起来很有希望，但不是那样的东西：
- word-wrap：break-word – 现在是CSS3工作草案的一部分 ，但是Firefox，Opera或Safari都不支持它。 这将是理想的解决scheme，如果它适用于所有浏览器今天:(
- 通过js /服务器端将<wbr>标签注入到string中 – 复制和粘贴URL在所有浏览器中都能正常工作，但是我仍然没有一个很好的方法来测量放置中断的位置。 而且，这个标签使HTML无效。
- 在每个字符之后添加中断 – 比数千个DOM插入更好，但仍然不理想（向文档添加DOM元素会消耗内存并减慢select器查询的速度）。
有没有人有更多的想法如何解决这个问题？
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; }
我通常使用word-wrap和<wbr>想法的组合来处理这个问题。 注意有几个变种 。 正如你所看到的， ​ 可能是您兼容性的最佳select。
word-wrap浏览器支持并不可怕 ，所有考虑事项，Safari，Internet Explorer和Firefox 3.1（Alpha Build）都支持它（ src ），所以我们可能不会那么遥远。
关于服务器端破损，我已经很成功地使用这个方法（PHP）：
function _wordwrap($text) { $split = explode(" ", $text); foreach($split as $key=>$value) { if (strlen($value) > 10) { $split[$key] = chunk_split($value, 5, "​"); } } return implode(" ", $split); }
基本上，对于超过10个字的单词，我将它们分成5个字符。 这似乎适用于我交付的所有用例。
有一个松散相关的问题在这里textarea 100％宽度忽略IE7中父元素的宽度
不知道是否有任何结论性的解决scheme被发现，但似乎最接近的是断字：打破所有 ，这可能在互联网爆炸的工作。
我还发现这个embedded在我的书签中的http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html ，这表示了大多数其他浏览器的解决方法，帮帮我。
CSS3将会非常棒
希望有所帮助，有兴趣看看你想出了什么。 对不起，我不能提供任何testing或更具体的。
在PHP中使用正则expression式应该更快地分解长单词。 我创build了一个处理htmlspecialchars的函数，并用＆shy分解单词; 这是有兴趣的人的function。 只要传递string和最大字长（如果你不想用“害羞”来分隔单词，则保留为0），并且它将返回一个string，其中包含html特殊字符转换以及用“害羞”分隔的单词;
function htmlspecialchars2($string = "", $maxWordLength = 0) { if($maxWordLength > 0) { $pattern = '/(\S{'.$maxWordLength.',}?)/'; $replacement = '$1­'; $string = preg_replace($pattern, $replacement, $string); } //now encode special chars but dont encode ­ $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&','"',''','<','>'), $string); return $string; }
您可以使用现在在IE7-8和FF3.5中工作的表格布局+自动换行CSS属性。 它不会解决问题，但至less你的devise不会被打破。
使用空格：如果需要根据组件的高度和宽度自动换行显示希望这可能是帮助充满你的CSS 正常 。
与Owen的回答非常相似，这在一行中实现了服务器端的同一事物：
return preg_replace_callback( '/\w{10,}/', create_function( '$matches', 'return chunk_split( $matches[0], 5, "​" );' ), $value );
这可以解决你的问题
function htmlspecialchars2($string = "", $maxWordLength = 0){ return wordwrap($string , $maxWordLength,"\n", true); }
