css/js中的自动换行

Question

我正在寻找一种跨浏览器的方式来包装具有预定宽度的div内部没有间隔空格(例如长URL)的长文本部分.

以下是我在网络上发现的一些解决方案以及它们为什么不适合我:

• 溢出:隐藏/自动/滚动 - 我需要在不滚动的情况下显示整个文本.div可以垂直增长,但不能水平增长.
• 注射和害羞; 通过js/server-side 进入字符串 - ­ 现在由FF3支持,但用­复制和粘贴URL; 在中间将无法在Safari中工作.此外,据我所知,没有一种简洁的方法来测量文本宽度,以找出最佳的字符串偏移量来添加这些字符(有一种hacky方式,请参阅下一项).另一个问题是放大Firefox和Opera很容易打破这个问题.
• 将文本转储到隐藏元素并测量offsetWidth - 与上面的项目相关,它需要在字符串中添加额外的字符.此外,测量长文本中所需的中断量可能很容易需要数千个昂贵的DOM插入(每个子串长度一个),这可以有效地冻结站点.
• 使用等宽字体 - 再次,缩放可能会弄乱宽度计算,并且文本无法自由设置样式.

看起来很有希望但不完全存在的事情:

• 自动换行:break-word - 它现在是CSS3工作草案的一部分,但它还没有得到Firefox,Opera或Safari的支持.如果它适用于所有浏览器,这将是理想的解决方案:(
• 通过js/server-side 将<wbr>标签注入到字符串中 - 复制和粘贴URL适用于所有浏览器,但我仍然没有很好的方法来测量放置中断的位置.此外,此标记使HTML无效.
• 在每个字符后添加中断 - 它比数千个DOM插入更好,但仍然不理想(将DOM元素添加到文档中会占用内存并减慢选择器查询速度等).

有没有人对如何解决这个问题有更多的想法？

Answer 1

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;
}  

Answer 2

我通常使用word-wrap和<wbr>想法的组合来处理这个问题.请注意,有一些变种.正如您所看到的,​可能是兼容性的最佳选择.

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个字符.这似乎适用于我已经交过的所有用例.

Answer 3

这里有一个松散相关的问题，100% 宽度的 textarea 会忽略 IE7 中父元素的宽度

不知道是否找到了任何决定性的解决方案，但似乎最接近的是word-break:break-all，它可能在 Internet Exploder 中完成工作。

我还发现这个http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html埋在我的书签中，这表明大多数其他浏览器的解决方法，这可能帮助。

如果 CSS3 出现的话，那就太棒了……

希望有帮助，有兴趣看看你想出什么。抱歉，我无法提供任何经过测试或更具体的内容。