vue css 文字超出末尾加省略号...多行溢出

// 一般写好盒子的 宽度 后，就可以使用下面样式
// 超出隐藏
// 末尾加省略号
// 不换行
// 行内元素转换行内块元素。（CSS2.1 新增的值） 

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;

但是

1 遇到flex布局，宽度不够的话，会与上面属性有冲突；

2 或者需要多加几行显示；

所以可以换一种

  overflow: hidden;
// 下面是显示几行写数字几就行
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;

-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果

在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).