使pre的内容自动换行

最新推荐文章于 2022-07-31 16:43:21 发布

慕容屠苏

最新推荐文章于 2022-07-31 16:43:21 发布

阅读量1.8k

点赞数

分类专栏：大前端爬坑之路

本文链接：https://blog.csdn.net/kerryqpw/article/details/92153205

版权

188 篇文章 60 订阅 ¥39.90 ¥99.00

订阅专栏

本文主要介绍了如何解决`

`元素中内容过长导致页面撑开或代码超出边界的问题。通过设置CSS样式`white-space: pre-wrap;`和`word-wrap: break-word;`，可以实现``内的代码自动换行，适用于各种浏览器，提供了一个良好的代码展示效果。

摘要由CSDN通过智能技术生成

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。

今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题：

1.先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。

点击查看：http://ww

了解本专栏

关注