代码示例
.div {
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
text-overflow
| value |
含义 |
| ellipsis |
文本截断处不显示省略号 |
| clip |
文本截断处出现省略号 |
text-overflow是个修饰样式，当文本超出容器的时候，文本将被截断。
| value |
含义 |
| ellipsis |
文本截断处不显示省略号 |
| clip |
文本截断处出现省略号 |
white-space
| value |
含义 |
| normal |
空白被浏览器忽略 |
| pre |
空白被浏览器保留，类似pre标签块 |
| nowrap |
文本不会换行 |
| pre-wrap |
保留空白符，正常换行 |
| pre-line |
保留空白符，保留换行符 |
| inherit |
父元素集成 |
【css实现省略号】只设置
text-overflow是不够的，还要设置
white-space，规定段落中的文本是否换行。
| value |
含义 |
| normal |
空白被浏览器忽略 |
| pre |
空白被浏览器保留，类似pre标签块 |
| nowrap |
文本不会换行 |
| pre-wrap |
保留空白符，正常换行 |
| pre-line |
保留空白符，保留换行符 |
| inherit |
父元素集成 |
推荐阅读
