得知互动

标题: css实现pre标签中内容换行方法 [打印本页]

作者: swmozowtfl 时间: 2015-7-9 23:18
标题: css实现pre标签中内容换行方法
html 中的 pre 标签默认是不会换行的，即使声明了 word-wrap 和 word-break 属性也没有效果；div 标签可以很方便的换行，不会把页面撑破。因为这个原因，很多网站在显示代码的时候使用 div 来作为容器。使用 div 标签装载代码有个弊端，就是冗余内容太多，换行，制表符，空格等都需要转换，自然源代码的体积也大了不少。若一定要使用 div 标签，也可以通过 white-space 来控制 div 中内容显示的样式，此举也是可以的。
本人认为，在源代码中使用 pre 标签作为代码容器是首选，后期前端再用其他的 javascript 代码高亮插件美化渲染，那又另当别论。使用 css 将 pre 中内容换行的样式如下，测试发现效果还不错。
<style>
pre{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* mozilla, since 1999 */
white-space: -pre-wrap; /* opera 4-6 */
white-space: -o-pre-wrap; /* opera 7 */
word-wrap: break-word; /* internet explorer 5.5+ */
overflow: auto;
word-break: break-all;
word-wrap: break-word;
}
</style>

更多网页制作信息请查看：网页制作

作者: wwzcdenleclv 时间: 2015-12-24 14:42
什么?????不知道......

作者: Mqokjdvq 时间: 2015-12-24 14:43
这就是我斗胆的一点粗略分析，每天睡觉以前，我都会把您的帖子再三拜读，拜读。

作者: mwxny 时间: 2015-12-24 14:43
这是怎么了啊??

作者: wwzcdenleclv 时间: 2015-12-24 14:43
我的我的忘记了呵呵

作者: wwzcdenleclv 时间: 2016-1-31 11:42
对于这种刚发的帖子，我总是毫不犹豫的顶了。如果火了就是个前排，可以混个脸熟，说不定谁好心就给粉了…稳赚不赔；如果沉了就感觉是我弄沉的，很有成就感，还能捞经验。

作者: bqtklouu 时间: 2016-1-31 11:43
哎怎么说那~~

欢迎光临得知互动 (https://bbs.dezhifl.com/)