CSS让PRE标签强制换行

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

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

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

使用前：文章源自陈学虎-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

 

历史上的今天
8 月
18
 最后更新：2021-8-16
  • 版权声明：本文为原创文章，转载请附上原文出处链接及本声明。
  • 转载请注明：CSS让PRE标签强制换行 | https://chenxuehu.com/article/2016/08/5543.html
  • CSS
  • PRE
  • 强制换行
前端设计看似简单，实则费神，伤脑

加载中...