如何让多文本内容只显示一行，其余用省略号来显示

转载https://www.cnblogs.com/mmykdbc/p/6204471.html

在此需要用到三个属性配合使用：

overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分省略号显示*/

 

我的写法如下

<div slot="header" class="clearfix">
    <span :title="rule_snl.description">{{rule_snl.label}}{{rule_snl.description}}</span>
    <el-button class="rule-btn" @click = "turnToRule(index)" >查看规则</el-button>
</div>

span{
    width: 100%;
    display: inline-block;
    overflow:hidden;
    /* white-space: pre-wrap; */
    white-space:nowrap;
    text-overflow:ellipsis;
  }