css -- 文字溢出 · 前端知識 -- 學習整理

> # 文字溢出 ~~~ 1.處理英文 -- word-break 2.出列漢字 -- white-space 3.文字溢出 -- text-overflow ~~~ > ##### word-break -- 換行后處理英文單詞是否打碎 ~~~ 1.normal 使用瀏覽器默認的換行規則。 2.break-all 允許在單詞內換行。 3.keep-all 只能在半角空格或連字符處換行。解釋： normal和keep-all 展示效果一致的，區別在于真的語言略有區別，但可以忽略 ~~~ * break-all 英文句子長度超過塊元素的寬度時，不會保證單詞的完整度而打斷單詞 ![](https://box.kancloud.cn/e8dc94021a03cfacf34e5c50451e3b40_207x54.png) * keep-all 會保證單詞完整度，但是單詞有‘-’ 符號除外 ![](https://box.kancloud.cn/35149ac3174f8dffceaa3fd8b82bc59a_157x49.png) > ##### white-space -- 強制在一行顯示(中英都好用） ~~~ 1.normal : 　默認處理方式 2.nowrap : 　強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。 ~~~ > ##### text-overflow -- 文字溢出是否顯示省略號 ~~~ 1.clip : 　不顯示省略標記（...），而是簡單的裁切 2.ellipsis : 　當對象內文本溢出時顯示省略標記（...） 3.注意一定要首先強制一行內顯示，再次和overflow屬性搭配使用 ~~~ * 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 120px; height: 20px; border: 1px solid #f00; white-space: nowrap; /* 首先先需要添加這句話強制一行*/ overflow: hidden; /* 其次必須有這句話 */ /* text-overflow: clip; 直接裁剪 */ text-overflow: ellipsis; /* 超出的部分，省略號代替 */ } </style> </head> <body> <div> 我的名字是你好才是大家好 </div> </body> </html> ~~~ > ##### 多行文字 * 只兼容 webkit 內核的 ~~~ overflow: hidden;溢出隱藏 text-overflow: ellipsis; 使用省略號顯示未顯示內容 -webkit-box-orient: ; 設置盒子內的對象排序方式 display: -webkit-box; 將對象設置為伸縮盒子顯示 -webkit-line-clamp: 用來限制行數以p標簽偽列 p{ display: -webkit-box; -webkit-box-orient:vertical; /*垂直排列*/ -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; } ~~~ * 兼容所有瀏覽器 ~~~ p{ height: 30px; /*塊級元素的高，比如實際文字內容將塊級元素撐開的高度是60px，我們設置展示高度小于實際高度*/ line-height: 2em;/*設置行高這樣讓單行文字顯示清晰設置行高是字體高度兩倍因此是兩行*/ overflow: hidden;/*由于高度小于實際高度，這樣溢出的文字就會被隱藏*/ border: 1px solid red;/*根據需求來添加邊框*/ position: relative;/*為接下來的偽元素做的定位*/ } p::after{ content: '...';/*設置省略號*/ position: absolute; right: 0; bottom: 0;/*設置定位位置在最右面*/ padding:0 0 0 10px ; background: #fff; /*設置背景顏色，這樣三個點所在的偽元素的背景顏色就會蓋住最后的字*/ } ~~~