目录
一、英文或数字
word-warp
word-break
二、文本
white-space
tips
三、单行文本超出隐藏并显示省略号
四、多行文本超出隐藏并显示省略号
一、英文或数字
word-warp
设置或检索当内容超过指定容器的边界时是否断行
| 属性值 | 说明 |
|---|---|
| normal | 自动换行（默认值，只在允许的断字点换行） |
| break-word | 强制换行(决定是否允许单词(abcdefj)内断句的。如果不允许的话，长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。 以单词作为换行依据 |
word-break
| 属性值 | 说明 |
|---|---|
| normal | 自动换行（默认值） |
| break-all | 允许在单词内换行(不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。 以字母作为换行依据 |
| keep-all | 只能在半角空格或连字符处换行 |
二、文本
white-space
| 属性值 | 说明 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
tips
- word-warp和word-break定义长单词或URL地址是否换行到下一行
- 需要指定盒子的width（宽度），否则换行或不换行不生效
三、单行文本超出隐藏并显示省略号
.div{
overflow: hidden;
text-overflow: ellipsis;//省略号
white-space: nowrap;
}四、多行文本超出隐藏并显示省略号
div{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; // 从上到下垂直排列子元素
-webkit-line-clamp: 2;// 显示两行内容
}