css 实现单行、多行文本过长使用省略号代替,以及有时多行省略不起效的解决方法

单行省略：

width:200px; //给文本内容设置宽度（注意：不设置宽度不会实现单行省略效果）

white-space:nowrap; //不允许换行，只一行显示

text-overflow:ellipsis; //超出内容使用省略号代替

overflow:hidden; //文本内容超过设置的宽度 隐藏不显示超出内容

 

多行省略：

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

-overflow:hidden;

上面的多行省略只针对于文字版结尾的多行省略，对于全是数字或字母组成的内容或结尾为数字、字母的过长内容不会实现多行省略的效果，这个时候就需要我们添加一个允许换行的属性word-break：break-all；添加这个属性之后，就可以实现汉字、字母、数字结尾的多行省略了