CSS/JS如何实现跨浏览器自动换行？

CSS/JS 中的自动换行：跨浏览器解决方案

在不滚动的情况下在预定 DIV 宽度内换行长文本字符串的挑战长期以来一直困扰着Web开发者。为了解决这个问题，人们探索了各种方法，每种方法都有其局限性。

• 溢出诸如“溢出：隐藏/自动/滚动”之类的技术限制文本可见性并允许滚动，在这种情况下这是不需要的。
• 注入 ­插入字符串 需要 JavaScript 或服务器端修改，但可能会中断复制和粘贴，并且跨浏览器的支持不一致。
• 通过隐藏元素测量文本宽度 计算成本较高，并且可能会导致网站冻结，尤其是对于大量文本正文。
• 等宽字体会扰乱宽度计算并限制文本样式。

尽管有像“word”这样有前途的候选字体-wrap：换行”和“”标签，这些方法要么缺乏浏览器支持，要么需要精确的断点计算，而这仍然难以捉摸。

尤里卡！ CSS 来救援

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

利用这个 CSS 规则，开发者可以无缝地实现跨浏览器自动换行，而不会遇到任何陷阱以前的方法。此外，您可以使用“自动换行：正常；”规则恢复默认换行行为。

该解决方案优雅地解决了自动换行的挑战，使开发人员能够以美观且与浏览器兼容的方式显示长 URL 和其他不间断的文本字符串。

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