<pre>标签中的内容如何自动换行?

  • 内容
  • 评论
  • 相关

<pre>标签中的内容如何自动换行?

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

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

然而我们在使用的过程中肯定碰到过这样的问题:如果同一行的代码特别长的话(比如包含了很长的url链接)就会出现把页面撑开超出边界,看着非常不舒服,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。

那么如何解决这个问题呢?下面给大家分享一下解决方法:

出现以上的问题是因为我们对<pre>标签没有理解,仅使用了<pre>标签在浏览器中的默认样式:

xmp, pre, plaintext {
 display: block;
 font-family: -moz-fixed;
 white-space: pre;
 margin: 1em 0;
}

注意white-space:这个样式,他有多个属性值

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。


其中有个pre-wrap,指的是保留空白符序列,并正常地进行换行。所以,我们就可以通过该样式的属性值结合word-wrap:样式实现<pre>标签的自动换行:

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

解决问题

IT技术资料分享-个人整理自互联网 https://www.lmdouble.com/1747572698.html

 

上一篇: 下一篇:
关注本站微信公众号


或加入QQ群:943816552
×
  • 小提示:部分页面点击查看图片会出现卡住的情况,按F5刷新就可以退出
  • 网站没流量,没收录怎么办?多年SEO优化经验为您提供专业的SEO优化解决方案
  • 电脑问题解决不了?卡顿,上不了网?8年电脑使用经验总结为您完美解决问题
  • 友情链接,广告合作联系QQ:1539995615
  • 滴~