pre 元素可(kě)定義預格式化(huà)的(de)文本。被包圍在 pre 元素中的(de)文本通(tōng)常會保留空格和(hé)換行符。而文本也(yě)會呈現爲等寬字體。
<pre> 标簽的(de)一個(gè)常見應用(yòng)就是用(yòng)來(lái)表示計算(suàn)機的(de)源代碼。
上海網頁設計師在爲客戶設計網站界面時(shí)，可(kě)以導緻段落斷開的(de)标簽（例如标題、<p> 和(hé) <address> 标簽）絕不能包含在 <pre> 所定義的(de)塊裏。盡管有些浏覽器會把段落結束标簽解釋爲簡單地換行，但是這(zhè)種行爲在所有浏覽器上并不都是一樣的(de)。
pre 元素中允許的(de)文本可(kě)以包括物(wù)理(lǐ)樣式和(hé)基于内容的(de)樣式變化(huà)，還(hái)有鏈接、圖像和(hé)水(shuǐ)平分(fēn)隔線。當把其他(tā)标簽（比如 <a> 标簽）放到 <pre> 塊中時(shí)，就像放在 HTML/XHTML 文檔的(de)其他(tā)部分(fēn)中一樣即可(kě)。
<pre> 元素可(kě)定義預格式化(huà)的(de)文本。被包圍在 pre 元素中的(de)文本通(tōng)常會保留空格和(hé)換行符。而文本也(yě)會呈現爲等寬字體。
<pre> 标簽的(de)一個(gè)常見應用(yòng)就是用(yòng)來(lái)表示計算(suàn)機的(de)源代碼。
而我們經常碰到的(de)一個(gè)問題是如果一個(gè)代碼上碰到有圖片或者網頁地址就會使代碼很長(cháng)，結果會造成頁面撐開或者代碼超出邊界。非常難受，如果用(yòng)overflow:hidden那麽會将原來(lái)的(de)代碼隐藏掉，用(yòng)overflow:auto則會出現滾動條，代碼也(yě)不方便閱讀。
1.先嘗試使用(yòng)：word-wrap: break-word;将内容自動換行，IE，OP，Chrome，Safari都可(kě)以，FF就悲劇了(le)。
2.查看了(le)pre的(de)浏覽器默認樣式：
xmp, pre, plaintext {display: block;font-family: -moz-fixed;white-space: pre;margin: 1em 0;}
都有這(zhè)個(gè)white-space: pre，看看white-space的(de)值：
| 值 | 描述 |
|---|---|
| normal | 默認。空白會被浏覽器忽略。 |
| pre | 空白會被浏覽器保留。其行爲方式類似 HTML 中的(de) <pre> 标簽。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 标簽爲止。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合并空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的(de)值。 |
有個(gè)pre-wrap，保留空白符序列，但是正常地進行換行。
這(zhè)樣就OK了(le)搞定，我們隻要加上樣式：
pre {white-space: pre-wrap;word-wrap: break-word;}
就能使<pre>的(de)内容自動換行了(le)。百度當中的(de)答(dá)案
加上這(zhè)段CSS，<pre>标簽就不會撐破網站了(le)
pre{white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;}
或者你在後台把文本中的(de)換行符全部替換成<br />标簽再輸入也(yě)行啊
例如
<%= content.Replace("
","<br />") %>
