使pre的內容自動換行

元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。

標籤的乙個常見應用就是用來表示計算機的源**。

而我們經常碰到的乙個問題是如果乙個**上碰到有或者網頁位址就會使**很長，結果會造成頁面撐開或者**超出邊界。非常難受，如果用overflow:hidden那麼會將原來的**隱藏掉，用overflow:auto則會出現滾動條，**也不方便閱讀。

今天折騰了乙個晚上終於搞定的內容自動換行的問題：

1.先嘗試使用：word-wrap: break-word;將內容自動換行，ie，op，chrome，safari都可以，ff就悲劇了。

2.檢視了pre的瀏覽器預設樣式：

xmp, pre, plaintext

都有這個white-space: pre，看看white-space的值：

值描述

normal 預設。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到

標籤為止。

pre-wrap 保留空白符序列，但是正常地進行換行。

pre-line 合併空白符序列，但是保留換行符。

inherit 規定應該從父元素繼承 white-space 屬性的值。

有個pre-wrap，保留空白符序列，但是正常地進行換行。

這樣就ok了搞定，我們只要加上樣式：

pre

就能使的內容自動換行了。

元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。標籤的乙個常見應用就是用來表示計算機的源而我們經常碰到的乙個問題是如果乙個上碰到有或者網頁位址就會使很長，結果會造成頁面撐開或者超出邊界。非常難受，如果用overflow hidden那...

元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。標籤的乙個常見應用就是用來表示計算機的源而我們經常碰到的乙個問題是如果乙個上碰到有或者網頁位址就會使很長，結果會造成頁面撐開或者超出邊界，如果用overflow hidden那麼會將原來...