CSS解讀之換行屬性

2021-06-20 06:59:09 字數 1049 閱讀 4063

首先換行只適用於標籤內的文字,並不作用於標籤本身。以前在使用css換行的時候,老是犯糊塗,總把一些屬性搞混。今天就來徹底把這些相關的屬性給弄清楚。以前需要用到自動換行的時候,就想到了比如word-break,word-wrap及white-space這些屬性。

用乙個**將上述的幾個屬性及其屬性值做一下說明。 屬性

屬性值說明

示例容器樣式div

這裡故意把其中搞乙個單詞

success

寫長來做乙個極端測試。

word-break

normal

瀏覽器預設處理

容器實際寬度已經大於

199px

break-all

單詞內換行,這個在英文中常用,漢字用不上

只能在半形空格或連字元處換行。這個規則其實還是更多用於英文

上面這種是屬於在空格處換行

上面這種屬於在連線符處換行

word-wrap

normal

控制連續文字換行。

容器實際寬度已經大於

199px

break-word

內容將在邊界內換行。如果需要,詞內換行(word-break)也會發生。

css 自動換行屬性

word break 屬性規定自動換行的處理方法。通過使用 word break 屬性,可以讓瀏覽器實現在任意位置的換行。所有主流瀏覽器都支援 word break 屬性。語法 word break normal break all keep all normal 使用瀏覽器預設的換行規則。brea...

換行的css屬性

正常換行 word break keep all word wrap normal 下面這行是自動換行 word break break all word wrap break word word wrap normal break word 內容換行 normal 預設的屬性值.允許內容頂開指定的...

css的position屬性解讀

在position屬性中主要有五種 一般使用定位的時候外相內絕即外部盒子相對定位,內部盒子絕對定位 相對定位 position relative 的元素相對於其正常位置進行定位。絕對定位 position absolute 的元素相對於最近的定位父級元素進行定位 position fixed 的元素...