css超出部分省略

1.单行：

.div1{

width:100px;

overflow: hidden;  // 内容会被修减，并且其余内容是不可见

text-overflow: ellipsis; // 显示省略号来代替被修减文本

white-space: nowrap; //文本不换行

}

2.多行：

.div2{

width: 100px;

display: -webkit-box; //必须结合的属性，对象作为弹性盒模型。

-webkit-line-clamp: 3 // 设置多少行

-webkit-box-orient: vertical  // 设置盒模型排列方式

overflow: hidden;  // 内容会被修减，并且其余内容是不可见

text-overflow: ellipsis; // 显示省略号来代替被修减文本

}

vue中多行注释需要添加

/* autoprefixer: ignore next */

-webkit-box-orient: vertical;

否则失效。。

 

 

"display": "-webkit-box",  // 使用了flex 需要加
"overflow": "hidden",  // 超出隐藏
"word-break": "break-all", // 纯英文、数字、中文
"text-overflow": "ellipsis", // 省略号
"-webkit-box-orient": "vertical", // 垂直
"-webkit-line-clamp": "1", // 显示一行
"white-space": "pre-line" // 合并空白符序列