參考
1.學下英語
word wrap意思是自動折行
pre是preserve的縮寫,意思是保留
2.認識下預設的情況
預設情況:
對於空格,多個空格會合併成乙個空格
對於回車,忽略
對於長於一行的句子,在空格處自動換行
對於長於一行的單詞,不換行(可能會產生滾動條)
3.white-space
white-space是作用於空格和回車上的，用於控制：(只作用預設情況的前三條)
normal | nowrap | pre | pre-wrap | pre-line
normal:字面意思是正常,恩,預設的情況
nowrap:字面的意思沒有自動換行,恩,預設情況的第三條,改成不會自動換行
pre:字面意思保留(你寫的所有),恩,無視預設情況,你寫成什麼樣就什麼樣
pre-wrap:字面意思保留(預設情況的)自動換行,恩,你寫成什麼樣就什麼樣,不過保留預設情況的第三條
pre-line:字面意思保留(預設情況的,空格渲染一致了就對齊了吧,我yy的)行,恩,你寫成什麼樣就什麼樣,不過保留預設情況的第一條
4.word-wrap
word-wrap是作用在單詞上，用於控制超長單詞是否折行:(作用預設情況的第四條)
normal | break-word
word-wrap:break-word,打斷單詞,就是允許單詞顯示到下一行
寫了個demo
5.省略號
參考text-overflow:ellipsis
單行顯示省略號,請注意是單行,如果是多行的話,不用這個.
保證單行:white-space:nowrap
溢位部分隱藏:overflow:hidden
顯示省略號:text-overflow:ellipsis
塊級元素不寫寬度預設是超過一行顯示省略號,寫寬度的話超過寬度顯示省略號
行內元素此屬性無效,因為沒有寬度的概念,也就不存在溢位的概念
行內塊必須寫寬度
demo
換行 文字隱藏省略號問題
overflow hidden 自動隱藏文字 text overflow ellipsis 文字隱藏後新增省略號 white space nowrap 強制不換行 overflow hidden text overflow ellipsis text overflow o ellipsis last...
css多行省略號和單行省略號
單行溢位，超出部分顯示.或者擷取。前提必須有寬度 陌生人，我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 div body html 陌生人，我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 d...
css 強制不換行，自動換行，超出顯示省略號
css 強制不換行，自動換行，超出顯示省略號 強制不換行 white space nowrap 自動換行 word wrap break word 強制英文單詞斷行 word break break all 注意 設定強制將英文單詞斷行，需要將行內元素設定為塊級元素。超出顯示省略號 text ove...