css white space屬性詳解

2021-08-09 17:59:23 字數 2803 閱讀 9548

css white-space這個css樣式,用來設定element元素對內容中的空格的處理方式,有著幾個可選值:normal,nowrap,pre,pre-wrap,pre-line。沒有設定white-space屬性,則預設為white-space:normal。

normal表示合併空格,多個相鄰空格合併成乙個空格,在原始碼中的換行作為空格處理,只會根據容器的大小進行自動換行。

這裡的空白是值空白字元,包括空格,製表符等空白字元,下面為了行文方便,統一用「空格」代表。

white-space:nowrap和normal一樣,也合併空格,但是不會根據容器大小換行,表示不換行。

.wscont

妹紙前端測試white-space屬性,

white-space屬性的keywrod值。

效果如下:

white-space:nowrap會導致文字不換行,經常和overflow,text-overflow一起使用,如下:

.wscont

妹紙前端測試white-space屬性,

white-space屬性的keywrod值。

效果如下:

這個效果在頁面布局中使用很頻繁,尤其在移動端布局中。

white-space:pre的作用是保持原始碼中的空格,有幾個空格算幾個空格顯示,同時換行只認原始碼中的換行和

標籤。

.wscont

妹紙前端測試white-space屬性,我們都是好朋友,春天到了,交配的季節又到了。

white-space屬性的keywrod值。

妹紙的學習園地,妹紙的前端樂園。

效果如下:

效果很明顯,原始碼中的換行在顯示中也換行了,原始碼中的多個空格也保留了。並且pre在沒有碰到原始碼換行和

的時候是不換行了,不會去自適應容器換行。

white-space:pre-wrap的作用是保留空格,並且除了碰到原始碼中的換行和

會換行外,還會自適應容器的邊界進行換行。

.wscont

妹紙前端測試white-space屬性,我們都是好朋友,春天到了,交配的季節又到了。

white-space屬性的keywrod值。

妹紙的學習園地,妹紙的前端樂園。

效果如下:

white-space:pre-wrap和white-space:pre的區別就是會自適應容器的邊界進行換行。

white-space:pre-line的作用是合併空格,換行和white-space:pre-wrap一樣,遇到原始碼中的換行和

會換行,碰到容器的邊界也會換行。

.wscont

妹紙前端測試white-space屬性,我們都是好朋友,春天到了,交配的季節又到了。

white-space屬性的keywrod值。

妹紙的學習園地,妹紙的前端樂園。

效果如下:

white-space:pre-line會保留原始碼中的換行,但是不會保留原始碼中的空格。

white-space屬性

原始碼空格

原始碼換行

換行容器邊界換行

normal

合併忽略

換行換行

nowrap

合併忽略

換行不換行

pre保留

換行換行

不換行pre-wrap

保留換行

換行換行

pre-line

合併換行

換行換行

我們現在寫前端頁面大部分只用考慮相容到ie8就可以,所以從這裡說,pre-wrap,pre-line都是可以使用的。相容性的最後一行表示這些css屬性同樣可以用到textarea元素中,當然要去除

標籤的作用,textarea會把它原樣顯示的。

CSS屬性 背景屬性 or 浮動屬性

background color red background image url background repeat no repeat repeat repeat x repeat y background position 水平位置 垂直位置 可以給負值 background attachme...

復合屬性 列表屬性 文字屬性

background 復合屬性 url 位址 本地位址,網路位址 repeat 預設值 水平和垂直都鋪滿 repeat x 只鋪滿水平方向 左右 repeat y 只鋪滿垂直方向 上下 no repeat 不平鋪 放不滿,留出空白 background size 100 100 背景縮放 boxba...

CSS屬性 文字屬性 or 列表屬性

font weight bolder 更粗的 bold 加粗 normal 常規 lighter 細的 font weight 100 900 100 500 不加粗 600 900 加粗 常用 100 細體 400 正常 700 加粗 900 更粗 font style italic 傾斜字 ob...