如何實現網頁文字原格式顯示

螞蟻小編發表於2017-02-26
網頁

有時候我們需要網頁中的文字能夠實現簡單的原格式顯示，比如空格和換行等等，但是瀏覽器在解析的時候並不能夠實現我們的要求，下面即是一段結合<pre>標籤實現此功能的程式碼，希望大家可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  white-space:normal;
}
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+*/
}
</style>
<body>
<div>
  <pre>
    螞蟻部落一
    螞蟻部落二
    螞蟻部落三 
    螞蟻部落四 
</pre>
</div>
</body>
</html>

相關文章