代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > css技巧 > css技巧之pre标签格式化文本后内容溢出的解决方案

css技巧之pre标签格式化文本后内容溢出的解决方案

css技巧 围观7728次 更新日期:2017-07-15 11:23:25 留下足迹

我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式。不会像放在其它标签里那样,把换行和空格都自动折叠了。这里看一下pre是如何工作的呢?

pre标签基本用法:

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

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

当pre元素来展示源代码的时候最好的方式是用code元素来包裹代码,这样既可以保持格式又可以代表语义,一举数得。如上面的代码可以改写为:

  1. <pre> 
  2. <code>body{ 
  3.     background:#fff; 
  4.       font: 12px/24px 1.66; 
  5. }</code> 
  6. </pre> 
注:pre中最好不要包含可以导致段落断开的标签(如:p,标题),虽然主流浏览器对此解析没有问题,但最好不要这样使用。存在着语义不明的情况,比如无法判断是想显示结构的不同展示,还是想把标签作为代码的一部分显示,最好对这里只包含代码文本,对于标签进行转义如'>'对应'>'。

pre文本溢出问题解决:

而我们经常碰到的一个问题是:如果我们在pre里放置的文本过长,中间也没有换行,由于pre会保持文本的格式,导致文本溢出。

如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。

最佳解决办法:

直接定义pre标签里的css属性white-space的值为pre-wrap,让内容自动换行

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标签内容自动换行了。

转载请注明:代码学堂>web前端 > css技巧 > css技巧之pre标签格式化文本后内容溢出的解决方案

喜欢 (834) or 分享 (16)