当前位置:首页 > 网站维护 > 列表

上海网页设计 能用pre,又能用自动换行代码

来源:浦一科技点击:时间:2017-7-25 关键词:上海网页设计 上海网站制作 pre 自动换行
pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。上海网页设计师在为客户设计网站界面时,可以导致段落断开的标签(例如标题、<p&
pre的内容自动换行

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

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

上海网页设计师在为客户设计网站界面时,可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。

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

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

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

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;}

就能使<pre>的内容自动换行了。
百度当中的答案

加上这段CSS,<pre>标签就不会撑破网站了

pre{white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;}

或者你在后台把文本中的换行符全部替换成<br />标签再输入也行啊

例如

<%= content.Replace("
","<br />") %>

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

预约建站
免费提供网站优化
领取关键词