以后地位:首页 > 建站常识 > 列表

上海网页设想 能用pre,又能用主动换行代码

点击: 次时候:2017/7/25关头词:上海网页设想 上海网站建造 pre 主动换行
pre 元素可界说预格局化的文本。被包围在 pre 元素中的文本凡是会保留空格和换行符。而文本也会显现为等宽字体。<pre> 标签的一个罕见利用便是用来表现计较机的源代码。上海网页设想师在为客户设想网站界面时,能够致使段落断开的标签(比方标题、&l
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.WordStr("
","<br />") %>

预定建站
收费供给网站优化
支付关头词