解決 html pre 標籤的內容自動換行的問題
html
內容
元素可定義預先格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字體。 </p> <p><pre class="brush:php;toolbar:false"> 標籤的一個常見應用就是用來表示電腦的原始碼。 </p> <p>而我們經常碰到的一個問題是如果一個程式碼上碰到有圖片或網頁地址就會使程式碼很長,結果會造成頁面撐開或程式碼超出邊界。非常難受,如果用<a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hidden那麼會將原來的程式碼隱藏掉,用overflow:auto則會出現捲軸,程式碼也不方便閱讀。 </p> <p>如何解決<pre class="brush:php;toolbar:false">的內容自動換行的問題:</p> <p>1.先嘗試使用:<a href="http://www.php.cn/wiki/878.html" target="_blank">word-wrap</a>: break-word;將內容自動換行, IE,OP,Chrome,Safari都可以,FF就悲劇了。 </p> <p>點擊查看demo</p> <p>2.查看了pre的瀏覽器預設樣式:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>xmp, pre, plaintext { display: block; font–family:–moz–fixed; white–space: pre; margin:1em0; }
登入後複製
都有這個white-space: pre,看看white-space的值:
值描述normal預設。空白會被瀏覽器忽略。 pre空白會被瀏覽器保留。其行為方式類似 HTML 中的
標籤。 nowrap文字不會換行,文字會在同一行上繼續,直到遇到 <br> 標籤為止。 pre-wrap保留空白符序列,但正常地進行換行。 pre-line合併空白符號序列,但保留換行符號。 inherit規定應該從父元素繼承 white-space <a href="http://www.php.cn/wiki/169.html" target="_blank">屬性</a>的值。 </p><p>有個pre-wrap,保留空格符序列,但正常地進行換行。 </p><p>這樣就OK了搞定,我們只要加上樣式:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>pre { white-space: pre-wrap; word-wrap: break-word; }
登入後複製
就能讓
的內容自動換行了。以上是解決 html pre 標籤的內容自動換行的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
Inzoi:如何申請學校和大學
1 個月前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)