讓pre標籤自動換行範例程式碼_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:39:14
原創
1353 人瀏覽過

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

 標籤的一個常見應用就是用來表示電腦的原始碼。對於技術部落格經常會用到pre標籤輸出程式碼或是程式碼高亮,而預設情況下,pre 標籤中的內容若超出範圍不會自動換行。 <br>以下介紹一個方法讓<pre class="brush:php;toolbar:false"> 標籤中的內容自動換行並符合W3C 標準(多重瀏覽器支援) <br><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode32'));"><u>複製程式碼</u></span></div></div>複製程式碼<div class="msgborder" id="phpcode32"> <br><br>程式碼如下:<br><br> <br>pre{ <br>white-space:pre-wrap; /* css3.0 */ <br>white-space:-moz-pre- wrap; /* Firefox */ <br>white-space:-pre-wrap; /* Opera 4-6 */ </div>white-space:-o-pre-wrap; /* Opera 7 */ <br> word-wrap:break-word; /* Internet Explorer 5.5 */ <br>} <br><div class="msgheader"><div class="right">範例: <span style="CURSOR: pointer" onclick="copycode(getid('phpcode33'));"><u></u></span>
</div></div>複製程式碼<div class="msgborder" id="phpcode33">
<br><br>程式碼如下:</div> pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap ; white-space:-o-pre-wrap; word-wrap:break-word; /*我是一個很長很長的程式碼,看我換行了木頭? */} 
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板