去评论
dz插件网

CSS实现pre标签中内容换行方法

哥斯拉
2022/06/10 18:32:06
HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;DIV 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器。使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 DIV 标签,也可以通过 white-space 来控制 DIV 中内容显示的样式,此举也是可以的。

本人认为,在源代码中使用 PRE 标签作为代码容器是首选,后期前端再用其他的 JavaScript 代码高亮插件美化渲染,那又另当别论。使用 CSS 将 PRE 中内容换行的样式如下,测试发现效果还不错。

[CSS]  
  1. <style>
  2. pre{
  3.     white-space: pre-wrap;       /* css-3 */
  4.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  5.     white-space: -pre-wrap;      /* Opera 4-6 */
  6.     white-space: -o-pre-wrap;    /* Opera 7 */
  7.     word-wrap: break-word;       /* Internet Explorer 5.5+ */
  8.     overflow: auto;
  9.     word-break: break-all;
  10.     word-wrap: break-word;
  11. }
  12. </style>