Pre標籤 自動換行

2022-03-04 23:05:10 字數 974 閱讀 6438

元素可定義預格式化的文字。被包圍在 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 標籤自動換行

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

pre 標籤換行

為了保留文字格式顯示,使用了pre標籤,發現內容到邊界不會自動換行。css 新增 white space pre wrap 後解決。style width 80 border style solid margin left 10 style font size 20px white space pr...

pre標籤 編譯換行

pre標籤 編譯換行 這是 預格式文字。它保留了 空格 和換行。pre 標籤很適合顯示計算機 for i 1 to 10 print i next i 編譯結果 筱夜宮主 這是 預格式文字。它保留了 空格 和換行。pre 標籤很適合顯示計算機 for i 1 to 10 print i next i...