CSS让PRE标签强制换行
2016-04-13 17:57
465 查看
CSS让PRE标签强制换行
2015.12.30 00:33
有时候在文章中插入pre标签,如果一行代码过长,超出了外部容器的宽度,要么把盒子撑破打乱布局,要么设置了overflow:hidden,有一部分代码就看不到了,其实这样很不友好,pre标签的里面的文本默认是不会自动换行的,但是CSS代码可以让他强制换行,请看下面代码:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since1999 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /*Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
上面的代码几乎可以兼容所有浏览器,你只需要添加到你的css文件中即可。
2015.12.30 00:33
有时候在文章中插入pre标签,如果一行代码过长,超出了外部容器的宽度,要么把盒子撑破打乱布局,要么设置了overflow:hidden,有一部分代码就看不到了,其实这样很不友好,pre标签的里面的文本默认是不会自动换行的,但是CSS代码可以让他强制换行,请看下面代码:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since1999 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /*Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
上面的代码几乎可以兼容所有浏览器,你只需要添加到你的css文件中即可。
相关文章推荐
- 图片BlendMode 样式
- CSS弹性盒子Flexbox布局详解
- css代码初始化
- css去掉iPhone、iPad默认按钮样式
- 2016.4.13--css总结
- link和@import两种导入css文件的区别。
- CSS的overflow属性及清除浮动
- html CSS常用样式
- css属性之animation与@keyframes制作天空动态云彩
- CSS--浏览器兼容
- 如何检测SQL注入和CSS攻击漏洞
- CSS:使用CSS3将一个div水平和垂直居中显示
- css去掉iPhone、iPad默认按钮样式
- 教你用CSS代码写出的各种形状图形
- css小记(3)
- 详细的css命名规则,专业点吧
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS3 伪类、伪元素节选
- css清除浮动定位造成的异常
- <css 十三> 关于选择器selector(2)