PRE 标签自动换行CSS代码

2024-05-31 0 144

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

那么如何使<pre 的内容自动换行呢?首先看一下<pre的浏览器默认样式:

都有这个white-space: pre,看看white-space的值描述:

normal:默认。空白会被浏览器忽略。

pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre标签。

nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br 标签为止。

pre-wrap:保留空白符序列,但是正常地进行换行。

pre-line:合并空白符序列,但是保留换行符。

inherit:规定应该从父元素继承 white-space 属性的值。


那么我们只要加上样式:

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

就能使<pre的内容自动换行了。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

优模板 建站知识 PRE 标签自动换行CSS代码 https://www.youmuban.com/436.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务