|
pre的内容自动换行 white-space: pre-wrap;
来源：
互联网
日期：2013-1-3
|
| |
|
|
| |
我们针对各种网店的需求，提供具有专业针对性的智能网店。集易用性和强大功能为一体，支持静态HTML生成和搜索优化、个性化模版定制、强大的网店管理系统和各种专业网店功能...点此申请
|
|
| |
|
|
| |
智能建站已经成为企业网站建设的主要方式，建立个性化企业网站是企业品牌形象的体现；具有强大灵活的网站功能、HTML生成、搜索引擎优化，现有简体、繁体、英文、日文等多国语言可选用。赶快申请，立即拥有个性化企业网站... |
|
| |
|
|
| |
三语易站是国内受众最广泛的傻瓜式自助建站系统。只要会打字就可以建站，支持简繁英三语，简繁自动转换；具有单页、文章、图文、下载等网站内容管理功能，自定义栏目内容设置，管理系统简单易用，适合企业个人自助创建和管理网站...点此申请
|
|
|
|
|
|
Tc711Com提示：<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
|
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。
今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题：
1.先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。
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 属性的值。
有个pre-wrap，保留空白符序列，但是正常地进行换行。
这样就OK了搞定，我们只要加上样式：
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
精品网站程序下载(草根站长最爱)
QQ2013,QQ2012临时会话插件(全国首发)
711旅游网站管理系统V2013（无功能限制）
711幻灯片管理系统（全国首发） 各类网站程序下载
711企业网站管理系统V2013个人版（无功能限制）
711免费在线客服系统个人版 V2.0
电影小偷采集程序V2013免费下载 点此查看
更多的pre的内容自动换行 white-space: pre-wrap;请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
互联网
日期：2013-1-3
|
|
|
|
|
设为首页 | 
加入收藏
