使<pre>的内容自动换行
2011-07-22 15:34
309 查看
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。
点击查看:http://www.css88.com/demo/pre/index-1.html
今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题:
1.先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。
点击查看:http://www.css88.com/demo/pre/index-2.html
2.查看了pre的浏览器默认样式:
有个pre-wrap,保留空白符序列,但是正常地进行换行。
这样就OK了搞定,我们只要加上样式:
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
就能使<pre>的内容自动换行了。
点击查看:http://www.css88.com/demo/pre/
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《使<pre>的内容自动换行》
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。
点击查看:http://www.css88.com/demo/pre/index-1.html
今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题:
1.先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。
点击查看:http://www.css88.com/demo/pre/index-2.html
2.查看了pre的浏览器默认样式:
xmp, pre, plaintext { display: block; font-family: -moz-fixed; white-space: pre; margin: 1em 0; }
都有这个white-space: pre,看看white-space的值:
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
这样就OK了搞定,我们只要加上样式:
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
就能使<pre>的内容自动换行了。
点击查看:http://www.css88.com/demo/pre/
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《使<pre>的内容自动换行》
相关文章推荐
- <pre>标签里面的内容实现自动换行(默认不会自动换行)
- 如何使<pre>元素里的内容自动换行
- 让tinyMce输出<pre>标签html代码自动换行
- 让<pre>标签文本自动换行
- <td>内容超出自动换行
- 关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
- 让<pre>标签的内容自动换行
- 开发日志:设置<DIV>内容不自动换行,及inline后width和height等失效的问题
- 在<table>或<div>中如何让传入的文本自动换行
- <span>标签自动换行(全英文状态下)
- PHP中,<textarea>里的内容保存MYSQL后,页面输出不换行的解决方法
- <pre>标签让<textarea>标签的内容原样输出
- 【转】如何实现<textarea> placeholder自动换行?
- 解决<pre>标签里的文本换行(兼容IE, FF和Opera等)
- 使<td>中的内容不换行
- <textarea>里的内容保存MYSQL后,页面输出不换行的解决方法
- ckeditor内容换行添加<br/>后多了几个非法字符"\u200b"
- 如何让html 标签<textarea>文本域 在Opera浏览器下自动换行
- 关于<textarea>的内容中换行的表示
- 使<td>中的内容不换行