繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > pre 自动换行的问题
- CSS样式表
- DIV和CSS排版中制作细线条的方法小结
- 在解决ul居中问题时想到的几点
- 网页编辑中CSS样式表技巧总结
- 一个老外弄的Clearing floats(清除浮动的方法)
- 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
- 无js5款纯div+css制作的弹出菜单标准
- 超强推荐CSS打造经典鼠标触发显示选项
- CSS网页布局入门教程5：二列宽度自适应
- CSS网页布局入门教程6：左列固定，右列宽度自适应
- CSS网页布局入门教程7：二列固定宽度居中
- CSS网页布局入门教程9：用CSS设计网站导航——横向导航
- CSS网页布局入门教程10：带当前标识的标签式横向导航
- CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版
- CSS网页布局入门教程12：纵向导航菜单
- CSS网页布局入门教程13：下拉及多级弹出式菜单
- CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
- 解读css发展历史
- 让用户自己控制网页字体的大小的css书写方法
- CSS注释、命名、继承性、样式排序等CSS技巧的小结
- CSS标签切换代码实例教程 比较漂亮
CSS样式表 中的 pre 自动换行的问题
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 143 ::
收藏到网摘: n/a
本站文章中使用了 pre 格式输出 代码。 而浏览器默认是强制不换行输出 pre 里的内容。这样的话，代码一长就出现了撑到页面外部的样子。在之前我都是有意的在代码里强制换行... 累啊. 今天有意的google了下，找到了：
代码如下:
pre {
whitewhite-space: pre-wrap; /* css-3 */
whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */
whitewhite-space: -pre-wrap; /* Opera 4-6 */
whitewhite-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
经测试，除IE[当前使用6]外, 其他可以.... 郁闷，然后增加 width:600px; 后，ok,.换行了，其实位置还是衍生出去了。样子是这样的： 代码是在里面了，但下面的叙述性的东西却出了去。在说，定义一个这个宽度也不是个好的方法，其他的不直接改这个css的方法基本没有了。
然后看上面css想到， 为什么定义其他的都用 white-space 而定义 IE 的不使用呢? 又不是IE 不支持。。于是加上就可以了[翻了google的前5页, 没找到一个改css解决的...汗]。
代码如下:
pre {
whitewhite-space: pre-wrap; /* css-3 */
whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */
whitewhite-space: -pre-wrap; /* Opera 4-6 */
whitewhite-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
whitewhite-space : normal ; /* Internet Explorer 5.5+ */
}
至于本站上使用的是把ie和其他的分开了，因为white-space 在最后也都作用于其他了....
代码如下:
pre {
whitewhite-space: pre-wrap; /* css-3 */
whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */
whitewhite-space: -pre-wrap; /* Opera 4-6 */
whitewhite-space: -o-pre-wrap; /* Opera 7 */
}
代码如下:
* html pre {
word-wrap: break-word; /* Internet Explorer 5.5+ */
whitewhite-space : normal ; /* Internet Explorer 5.5+ */
}
评论 (0) All
