CSS让PRE标签强制换行

老虎说测试 前端技术字数 464阅读1分32秒阅读模式
摘要最近在做媒体格式库,由于采用了系统自动导出文件格式,然后录入数据库,为了控制样式显示,就使用了PRE标签,然而,有些格式尼玛太奇怪了,好长好长好长,这样就把页面给撑的太难看了,因此...

最近在做媒体格式库,由于采用了系统自动导出文件格式,然后录入数据库,为了控制样式显示,就使用了PRE标签,然而,有些格式尼玛太奇怪了,好长好长好长,这样就把页面给撑的太难看了,因此需要使用CSS样式强制让它换行,因此就有了:

  1. /* Browser specific (not valid) styles to make preformatted text wrap */
  2. pre {
  3.        white-spacepre-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. }

使用前:文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

CSS让PRE标签强制换行-图片1文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

 文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

使用后:文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

CSS让PRE标签强制换行-图片2文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

 文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

完美~文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

 文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

 文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

 文章源自陈学虎-https://chenxuehu.com/article/2016/08/5543.html

 

 最后更新:2021-8-16
  • 版权声明:本文为原创文章,转载请附上原文出处链接及本声明。
  • 转载请注明:CSS让PRE标签强制换行 | https://chenxuehu.com/article/2016/08/5543.html