文本超出内容区域后用三个省略号代替

Posted 2020-08-24

1.固定宽高的

  当div的宽高被固定了， 我们只需要给它加三个属性： overflow:hidden   （超出部分隐藏）

                                                                      white-space:nowrap    （强制不换行）

                                                                      text-overflow:ellipsis     （用三个省略号代替）

上面这种方法没有兼容性问题，但是有局限性，就是文本只能有一行，要是遇到下面这种情况怎么做呢？

就需要用到下面这种办法了

2.不固定宽高的

  我们需要给div设置4个属性： display:-webkit-box     （box-flex布局）

                                        -webkit-box-origin:vertical     （垂直排列子元素）

                                        -webkit-line-clamp;n  (n>0)     （显示几行）

                                        overflow:hidden                   （超出部分隐藏）

这种方法可以实现上面那种效果，不过有兼容性问题。