使用css实现文字溢出省略号的方法有哪些

小编给大家分享一下使用css实现文字溢出省略号的方法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

1.单行实现文字省略号

/*这里要显示的设置宽度*/

overflow:hidden;

white-space:nowrap;

/*文字超出宽度则显示ellipsis省略号*/

text-overflow:ellipsis;

width:100%;

2345截图20181015145014.png

2.第几行实现文字省略号

display:-webkit-box;

-webkit-box-orient:vertical;/*设置方向*/

-webkit-line-clamp:2;/*设置超过为省略号的行数*/

overflow:hidden;

使用webpack打包工具时，会忽视这个-webkit-box-orient属性，这里修改成下面的写法就可以了

display:-webkit-box;

overflow:hidden;

/*autoprefixer:off*/

-webkit-box-orient:vertical;

/*autoprefixer:on*/

-webkit-line-clamp:8;

text-overflow:ellipsis;

3.用js实现字数后加省略号

if(title.length>26){

title=title.substring(0,27)+"...";

}

4.换行word-break和word-wrap

white-space:normal(自动换行)，当写入的文字超过定义的宽度后会自动换行，但当写入的数据是一堆没有空格的字符或者字母或者数字时，超过容器的宽度时就会把容器撑大，不换行

这时可以用：word-break:break-all;word-wrap:break-word来解决

word-break:break-all在超过容器宽度时，若有一个单词很长，则会将单词截断，分开写

word-wrap:break-word在超过容器宽度时，若有一个单词很长，则会将单词放到下一行，而不对单词进行截断

word-break:normal|break-all|keep-all

normal:允许在字内换行

break-all:允许在单词内换行

keep-all:只能在半角空格或连字符处换行。

word-wrap:normal|break-word

normal:允许内容顶开指定的容器边界

break-word:内容将在边界内换行。如果需要，词内换行（word-break）也会发生

以上是"使用css实现文字溢出省略号的方法有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！