代码示例
.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 |
父元素集成 |
只设置text-overflow是不够的,还要设置white-space,规定段落中的文本是否换行。
| value |
含义 |
| normal |
空白被浏览器忽略 |
| pre |
空白被浏览器保留,类似pre标签块 |
| nowrap |
文本不会换行 |
| pre-wrap |
保留空白符,正常换行 |
| pre-line |
保留空白符,保留换行符 |
| inherit |
父元素集成 |