多余文本显示三个点

记录一下在工作中遇到的一个超出文本显示省略号的问题，之前用下面通用的三行代码，结果失效了，然后又找的方法实现了一下。
这是我在移动端遇到的不兼容问题，反正用最后的补充方法解决了它。
代码直接可以用的。

一行：
//弹性盒子中失效
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

两行：
word-break: break-all; 
white-space: normal;
overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient:vertical;
  /* autoprefixer: on */
  -webkit-line-clamp:2;

三行：
overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient:vertical;
  /* autoprefixer: on */
  -webkit-line-clamp:3;

//两行或者三行失效用此方法
给span添加属性 word-break: break-all; /如果单词超过宽度了，整个单词打散，超过的部分换行 */
white-space: normal; / 重点是这个属性 */
就会自动换行。
    width: 100%;
    height: 1rem;
    word-break: break-all;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 1; //控制在第几行显示省略号