css实现省略号
作者:
阡陌夕殇 | 来源:发表于
2017-11-30 22:45 被阅读39次
代码示例
.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 |
父元素集成 |
本文标题：css实现省略号
本文链接：https://www.haomeiwen.com/subject/dzsvbxtx.html
网友评论