Question

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

以下是我在网络上发现的一些解决方案以及不为我工作的原因：

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

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

自动换行：break-word - 它现在是part of CSS3 working draft，但Firefox，Opera或Safari都不支持它。如果它适用于所有浏览器，这将是理想的解决方案：（
注入＆lt; wbr＆gt;通过js / server-side标记到字符串 - 复制和粘贴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>想法的组合处理此问题。请注意，有一些variants。正如您所看到的，可能是兼容性的最佳选择。

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, "&#8203;");
        }
    }
    return implode(" ", $split);
}

基本上，对于超过10个字符的单词，我将它们分成5个字符。这似乎适用于我所有的用例。

Answer 3

这里存在一个松散相关的问题textarea with 100% width ignores parent element's width in IE7

不知道是否找到任何结论性解决方案，但似乎最接近 word-break：break-all ，这可能会在Internet Exploder中完成。

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

CSS3会很棒，如果它来到这里......

希望有所帮助，有兴趣看看你想出了什么。对不起，我不能提供任何测试或更具体的内容。

Answer 4

在PHP中使用正则表达式可以更快地分解长词。我已经创建了一个函数来处理htmlspecialchars并用＆amp; shy分解单词;这是任何感兴趣的人的功能。只需传递字符串，以及最大字长（如果你不想用＆amp; shy分解单词，则保留为0），它将返回一个字符串，其中包含转换后的html特殊字符，以及＆amp; shy; < / p>

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

Answer 5

您可以使用表格布局+自动换行CSS属性，该属性现在可以在IE7-8和FF3.5中使用。它不会解决问题，但至少你的设计不会被打破。

Answer 6

如果需要根据组件的高度和宽度自动换行文本，请在css中使用 white-space：normal ，希望这可能对你有所帮助。

Answer 7

非常类似于Owen的回答，这在一行中实现了服务器端的相同功能：

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

Answer 8

这可以解决您的问题

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

css / js中的自动换行

8 个答案: