让<pre>标签文本自动换行
来源:互联网 发布:假期综合症 锻炼 知乎 编辑:程序博客网 时间:2024/06/16 12:28
让<pre>标签文本自动换行
让 <pre /> 标签中的内容自动换行并符合 W3C 标准(多浏览器支持)
默认情况下,<pre /> 标签中的内容若超出范围不会自动换行,这样无论在显示或打印都会出现麻烦。
下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码:
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+ */}更多内容请参见:http://www.w3.org/TR/css3-text/#white-space。
pre标签会原样保留HTML内容的格式,可是如果宽度过大会把页面撑坏,这时候需要自动换行来帮忙:
Wrapping the pre tag
Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap:
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
父标记最好加个DIV,并设置CSS属性:word-wrap: break-word;white-space : normal;
直接使用style写法:
<pre style="width:30px;word-break: break-all; word-wrap:break-word;border:1px solid #555">
asfasdfas
dfasd
fa
sdfasdf
</pre>
本站文章中使用了 pre 格式输出 代码。 而浏览器默认是强制不换行输出 pre 里的内容。这样的话,代码一长就出现了撑到页面外部的样子。在之前我都是有意的在代码里强制换行... 累啊. 今天有意的google了下,找到了:
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
经测试,除IE[当前使用6]外, 其他可以.... 郁闷,然后增加 width:600px; 后,ok,.换行了,其实位置还是衍生出去了。样子是这样的:代码是在里面了,但下面的叙述性的东西却出了去。在说,定义一个这个宽度也不是个好的方法,其他的不直接改这个css的方法基本没有了。然后看上面css想到,为什么定义其他的都用 white-space 而定义 IE 的不使用呢? 又不是IE 不支持。。于是加上就可以了[翻了google的前5页, 没找到一个改css解决的...汗]。
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space : normal ;
}
至于本站上使用的是把ie和其他的分开了,因为white-space 在最后也都作用于其他了....
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
}
* html pre {
word-wrap: break-word;
white-space : normal ;
}
- 【HTML】让<pre>标签文本自动换行
- 让<pre>标签文本自动换行
- 让pre标签自动换行
- html pre标签使文本自动换行
- 让<pre>标签的内容自动换行
- CSS之让pre标签自动换行
- 让pre标签换行
- pre标签自动换行
- 让pre自动换行
- 让Pre标签内的文字自动换行
- pre标签自动换行方案
- ueditor文本超过编辑器宽度不换行问题(使pre标签内容自动换行)
- CSS让PRE标签强制换行
- pre标签里面内容自动换行
- div+pre标签的组合实现文本原格式显示与自动换行
- pre标签自动换行方案中遇到的一些问题
- pre自动换行输出
- 自定义文本标签,自动换行 WordWrapTextView
- bug管理工具知多少?
- ListView的Item对应多布局,滚动错位
- vim:怎样查找?
- 关于页面元素绑定jquery中的toggle后,元素隐藏的问题
- 全面解析C++中的new,operator new与placement new
- 让<pre>标签文本自动换行
- C/C++ 笔试、面试题目大汇总
- OCM_Session4_3_Oracle_Loader External Tables
- gdb:怎样做内存查找?
- 求两个单向无环链表的第一个公共交点
- Tomcat 内存设置
- 算法第三次作业
- POJ 2411Mondriaan's Dream(类似hdu1992铺砖问题)
- vsftpd as ftp server