pre標籤中文本實現換行

來源:互聯網
上載者:User
被包圍在pre元素中的文本通常會保留空格和分行符號,但不幸的是,當你在<pre>標籤裡面寫代碼的時候,如果你沒有手動換行,它也會給你保留,而不會動換行。

  我們都知道<pre>標籤可定義預格式化的文本,一個常見應用就是用來表示電腦的原始碼。被包圍在pre元素中的文本通常會保留空格和分行符號,但不幸的是,當你在<pre>標籤裡面寫代碼的時候,如果你沒有手動換行,它也會給你保留,而不會動換行。
  這時候,你可以使用overflow:auto;(當代碼超出容器邊界的時候,顯示捲動方塊),但這個方法也並不適用於所有主流瀏覽器,一些瀏覽器會直接截斷超出的內容。


  由於本站中使用源碼的地方也不是很多,之前也不是很在意這個問題,前不久有位熱心的網友在QQ上反饋這個問題,於是在趁這次更換主題時,尋找了一下解決方案,分享之。
  pre{
  white-space:pre-wrap;/*css-3*/
  white-space:-moz-pre-wrap;/*Mozilla,since1999*/
  white-space:-pre-wrap;/*Opera4-6*/
  white-space:-o-pre-wrap;/*Opera7*/
  word-wrap:break-word;/*InternetExplorer5.5+*/
  }


  該CSS方案可讓pre標籤內的文本自動換行,我在我有的瀏覽器上都測試了一下,全部支援,IE6,IE7,IE8,Firefox,Opera,Safari和Chrome。

  僅當你把視窗縮小到小於20個字元的寬度的時候,才會超出邊界。
 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。