1.自动换行
| p { | |
| word-wrap:break-word; | |
| word-break:normal; | |
| } |
2.强制不换行
| div{ | |
| white-space:nowrap; | |
| } |
3. 强制英文单词换行
| div{ | |
| word-break:break-all; | |
| } |
4.单行文本不换行多余文本显示省略号 行内元素最好转为inline-block
| div{ | |
| white-space:nowrap; | |
| overflow:hidden; | |
| text-overflow:ellipsis; | |
| } |
5.多行文本超出隐藏多余文本显示省略号
| div{ | |
| display:-webkit-box; | |
| overflow:hidden; | |
| text-overflow:ellipsis; | |
| -webkit-line-clamp:3; | |
| -webkit-box-orient:vertical; | |
| } |