关灯
开启左侧

[网页制作] css实现pre标签中内容换行方法

[复制链接]
swmozowtfl 发表于 2015-7-9 23:18:37 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
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>

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

精彩评论6

正序浏览
wwzcdenleclv 发表于 2015-12-24 14:42:25 | 显示全部楼层
 
什么?????不知道......
 
Mqokjdvq 发表于 2015-12-24 14:43:07 | 显示全部楼层
 
这就是我斗胆的一点粗略分析,每天睡觉以前,我都会把您的帖子再三拜读,拜读。
 
mwxny 发表于 2015-12-24 14:43:22 | 显示全部楼层
 
这是怎么了啊??
 
wwzcdenleclv 发表于 2015-12-24 14:43:47 | 显示全部楼层
 
我的我的 忘记了 呵呵
 
wwzcdenleclv 发表于 2016-1-31 11:42:41 | 显示全部楼层
 
对于这种刚发的帖子,我总是毫不犹豫的顶了。如果火了就是个前排,可以混个脸熟,说不定谁好心就给粉了…稳赚不赔;如果沉了就感觉是我弄沉的,很有成就感,还能捞经验。
 
bqtklouu 发表于 2016-1-31 11:43:01 | 显示全部楼层
 
哎 怎么说那~~
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

1粉丝

2503帖子

热门图文
热门帖子
排行榜
作者专栏

关注我们:微信订阅号

官方微信

APP下载

全国服务Q Q:

956130084

中国·湖北

Email:956130084@qq.com

Copyright   ©2015-2022  站长技术交流论坛|互联网技术交流平台Powered by©Discuz!技术支持:得知网络  

鄂公网安备 42018502006730号

  ( 鄂ICP备15006301号-5 )