css实现省略号

代码示例

.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	父元素集成