CSS 控制单行或者多行文本超出显示省略号

1.单行文本

p {overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段落中的文本不进行换行 */width: 250px;/*需要配合宽度来使用*/}

2.多行文本显示省略号，省略号在段尾

p{display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

Tips:

// vue 中不会报错text-overflow:ellipsis;text-overflow:-o-ellipsis-lastline;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;

// 多行超出省略号不生效解决办法：text-overflow:ellipsis;display:-webkit-box;/*!autoprefixer:off*/-webkit-box-orient:vertical;/*autoprefixer:on*/-webkit-line-clamp:3;overflow:hidden;