css中关于超出显示省略号

1、单行超出显示省略号

overflow: hidden;  //超出隐藏

text-overflow: ellipsis; //文本超出时显示省略号

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

 

2、多行超出显示省略号

overflow: hidden;  //超出隐藏

text-overflow: ellipsis; //文本超出时显示省略号

display: -webkit-box;

-webkit-box-orient: vertical;//子元素排列 vertical（竖排）orhorizontal（横排）

-webkit-line-clamp: 3;//内容限制的行数

 

注意：超出显示省略号的文本需要设置宽度 ！！！