換行的css屬性

2022-08-31 08:33:08 字數 1219 閱讀 3904

//正常換行

word-break:keep-all;word-wrap:normal;

//下面這行是自動換行

word-break:break-all;word-wrap:break-word;

word-wrap:normal | break-word; (內容換行)

normal:預設的屬性值.(允許內容頂開指定的容器邊界).

break-word:內容將在邊界內換行(不截斷英文單詞換行,截斷英文單詞下面的屬性才具備這個功能。) 

word-break:normal | break-all | keep-all (詞內換行)

normal:如果是中文則到邊界處的漢字換行,如果是英文整個詞換行,注意:如果出現某個英文本串長度超過邊界,則後面的部分將撐開邊框,如果邊框為固定屬性,則後面部分將無法顯示.

break-all : 強行換行,將截斷英文單詞

keep-all : 不允許字斷開。如果是中文將把前後標點符號內的乙個漢字短語整個換行,英文單詞也整個換行,注意:如果出現某個英文.字串長度超過邊界,則後面的部分將撐開邊框,如果邊框為固定屬性,則後面部分將無法顯示. 

text-overflow:clip | ellipsis (文字溢位)

clip :  不顯示省略標記(...),而是簡單的裁切

ellipsis :  當物件內文字溢位時(超過width部分)顯示省略標記(...)

white-space: normal | pre | nowrap (內容不換行)

normal 預設。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

(層中放乙個**,如果層的float:none 則**和層間會有空隙,這種問題的解決辦法是在層的style裡面加上white-space: nowrap)

使用方式: word-break:break-all;

一般情況下:

.body 

.css

ie與firefox將它看成是乙個長單詞了,因此不會自動換行。

對於ie,可以通過ie專有的css屬性word-wrap即可實現自動換行:word-wrap:break-word;

對於firefox,css2標準並沒有定義類似word-wrap的屬性,可以通過overflow屬性將撐出的部分隱藏:overflow:hidden

css 自動換行屬性

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

CSS解讀之換行屬性

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

CSS網頁布局強制換行和強制不換行的屬性講解

在css網頁布局中,常常會遇到這樣的www.cppcns.com問題,強制文字換行,而不是在一行內顯示撐開容器影響布局。而有些時候可能會強制內容不換行,多出的部分隱藏掉即可,關於強制不換行與強制換行的一些css屬性webjx.com作一些整理,希望能給大家的工作和學習提供參考。先了解以下幾個屬性 強...