換行、文字隱藏省略號問題
阿新 • • 發佈：2017-12-02
默認 cal 顯示 size 添加 width 規則 方法 tab
4、word-break屬性設置自動換行的處理方法
1、一行超出文字隱藏
overflow: hidden; /*自動隱藏文字*/ text-overflow: ellipsis; /*文字隱藏後添加省略號*/ white-space: nowrap; /*強制不換行*/
2、div顯示兩行文字，超出兩行部分省略號顯示
overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-line-clamp: 2; /* 限制行數 */ -webkit-box-orient: vertical;
3、white-space屬性可設置不換行
| 值 | 描述 |
| normal | 默認。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合並空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
4、word-break屬性設置自動換行的處理方法
| 值 | 描述 |
| normal | 使用瀏覽器默認的換行規則。 |
| break-all | 允許在單詞內換行(解決長單詞或url地址換行顯示) |
| keep-all | 只能在半角空格或連字符處換行。 |
換行、文字隱藏省略號問題