利晶设计机构博客

关注研究网站设计及SEO网站优化技术!致力于为客户提供最专业、最有效的全方面网站设计解决方案。

订阅RSS

使Pre标签使内容自动换行

类别:网站前端开发    时间:2010-12-27

Pre元素可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。

Pre标签的一个常见应用就是用来表示计算机的源代码。

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。

然而使用Pre标签就能很好的解决这个问题,以下是Pre标签样式

值  描述
normal       默认。空白会被浏览器忽略。
pre             空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap     文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap  保留空白符序列,但是正常地进行换行。
pre-line     合并空白符序列,但是保留换行符。
inherit       规定应该从父元素继承 white-space 属性的值。

有个pre-wrap,保留空白符序列,但是正常地进行换行。

在线页面上只要加上样式:
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
就能使<pre>的内容自动换行了。

查看演示:http://www.ljun.net/blog/yanshi/pre-huanhang.html

转载声明:
原载:利晶科技博客 - 关注研究最新网站设计技术及SEO网站优化!
本文链接:http://www.ljun.net/blog/pre-huanhang.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作!

文章分类

服务项目

友情链接

Copyright © 2006-2012 利晶设计机构 版权所有