如何在不同浏览器中可靠地将长单词换行到 Div 中？

在 Div 中换行长单词：跨浏览器指南

虽然 Internet Explorer 提供自动换行样式，但个人可能会寻求跨平台的单词解决方案- 将长字符串包裹在 div 中。本文探讨了实现此目标的 CSS 和 JavaScript 方法。

CSS 方法：

CSS 提供了多个可以启用自动换行的属性。以下代码片段应该适用于大多数浏览器：

.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 */
}

通过将 wordwrap 类应用于包含文本的 div，浏览器将自动换行长单词以适应可用宽度。

JavaScript 方法:

如果CSS不可行，JavaScript也可以用来模拟自动换行。一种方法是将每个字符单独包装在一个 span 元素中：

function wrapWords(div) {
  var text = div.innerHTML;
  var wrappedText = "";
  for (var i = 0; i < text.length; i++) {
    wrappedText += "<span>" + text[i] + "</span>";
  }
  div.innerHTML = wrappedText;
}

此函数迭代字符，为每个字符创建一个 span，然后将包装后的文本插入回 div 中。

以上是如何在不同浏览器中可靠地将长单词换行到 Div 中？的详细内容。更多信息请关注PHP中文网其他相关文章！