在 css / js 中自动换行

IT技术 javascript css
2021-02-03 22:11:31

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

这里有一些解决方案，我在网络上发现的，为什么他们不为我工作：

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

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

  • word-wrap : break-word - 它现在是 CSS3 工作草案的一部分，但 Firefox、Opera 或 Safari 尚不支持它。如果它适用于今天的所有浏览器，这将是理想的解决方案:(
  • 通过 js/ 服务器端将 <wbr> 标签注入字符串- 复制和粘贴 URL 可以在所有浏览器中使用，但我仍然没有一个很好的方法来衡量在哪里放置中断。此外，此标记使 HTML 无效。
  • 在每个字符后添加中断- 这比数千个 DOM 插入要好，但仍然不理想（将 DOM 元素添加到文档会占用内存并减慢选择器查询等）。

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

6个回答

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: break-word;适用于 Firefox 3.5+ -- 但不适用于 span 等内联元素。（即使不在 Firefox 5.0 中）您必须display: inline-block;使用word-wrap: break-word;
2021-03-21 22:11:31

我通常使用word-wrap和 的组合来处理这个<wbr>问题。请注意有几个变体。如您所见，&#8203;这可能是兼容性的最佳选择。

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 个字符。这似乎适用于我收到的所有用例。

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

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

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

如果 CSS3 出现在这里，它会很棒......

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

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

您可以使用表格布局 +word-wrap CSS 属性，该属性现在适用于 IE7-8 和 FF3.5。它不会解决问题，但至少您的设计不会被破坏。

其它你可能感兴趣的问题
上一篇从相对 URL 获取绝对 URL。（IE6 问题） 下一篇提交前添加POST参数