如何在div元素中实现跨浏览器自动换行？-css教程-PHP中文网

如何在div元素中实现跨浏览器自动换行？

Linda Hamilton

发布： 2024-12-07 10:16:13

原创

510 人浏览过

How Can I Achieve Cross-Browser Word Wrapping in a Div Element?

Div 中扩展字符串的跨浏览器自动换行

虽然 Internet Explorer 提供了自己的自动换行样式，但找到一种跨浏览器的自动换行样式在 div 中换行文本的浏览器解决方案是一个常见问题。本文探讨了 CSS 和 JavaScript 方法来应对这一挑战。

CSS 方法

CSS 提供了几种在 div 中自动换行长字符串的选项：

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

登录后复制

JavaScript 方法

虽然不如CSS、JavaScript也可以实现自动换行。一种方法是使用自动换行功能：

function wordwrap(str, width) {
  if (!width) { width = 80; }

  var re = new RegExp(".{" + width + "}(\s|$)|\S+\S{0," + (width - 1) + "}", "g");
  return str.match(re).join("\n");
}

登录后复制

应用于 Div

要将任一方法应用于 div，请在 CSS 中使用适当的代码或JavaScript 文件并将相关的类或 ID 分配给 div 元素。

对于 CSS方法：

<div class="wordwrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit mi nibh, id sagittis tellus maximus eget. Mauris ut pharetra est, eu mattis quam.
</div>

登录后复制

对于 JavaScript 方法：

<div>

登录后复制

以上是如何在div元素中实现跨浏览器自动换行？的详细内容。更多信息请关注PHP中文网其他相关文章！