css文字的強制換行和超出寬度省略變成點兒

2022-05-17 19:19:01 字數 700 閱讀 8387

一、文字換行

今天做div內部放文字時發現,不管我div設定多寬的屬性,都會有div裡面的字丁出去,不在div內部的狀況,因此我就使用了css樣式設定,強制將文字換行:

三種方式

1、 word-break: break-all; 只對英文起作用,以字母作為換行依據。

2、word-wrap: break-word; 只對英文起作用,以單詞作為換行依據。

3、white-space: pre-wrap; 只對中文起作用,強制換行。

二、禁止換行且超出部分省略

* 使用超出顯示省略的時候,一定要給設定樣式這層標籤加乙個max-width 或者 width, 若這層標籤的上一級標籤設定了寬度,那麼這層標籤的width可以設定成百分比。

overflow:hidden;//內容溢位處理

white-space:nowrap;//文字超出時不換行

text-overflow:ellipsis;//文字溢位處理

*span:由於span標籤屬於行內元素,想要對他進行省略操作的話,必須要讓他顯示為塊級元素,新增css樣式:

display: inline-block;

css強制換行和超出隱藏實現

一 強制換行 1 word break break all 只對英文起作用,以字母作為換行依據。2 word wrap break word 只對英文起作用,以單詞作為換行依據。3 white space pre wrap 只對中文起作用,強制換行。word break break all 和 wo...

css強制換行和超出隱藏實現

一 強制換行 1 word break break all 只對英文起作用,以字母作為換行依據。2 word wrap break word 只對英文起作用,以單詞作為換行依據。3 white space pre wrap 只對中文起作用,強制換行。word break break all 和 wo...

CSS設定超出指定寬度自動換行

一 背景 最近專案中有用到在div中顯示使用者反饋的資訊,是指定寬度的div,超出要自動換行,開始寫好後感覺應該沒什麼問題,後來自己隨便輸入測試資料的時候發現 如果是純字母或者是純數字就會出現超出了也不會自動換行的問題,甚是無解,後經過努力,已經完美解決,下面來介紹解決方式。二 解決方式 對於div...