项目中 单行文本过长或多行文本时，用省略号代替并悬停时提示全部文本内容_el-form-item文字超长省略号

项目中，经常会遇到单行文本过长或是多行文本显示的冗长，可以使用省略号 '...' 代替
1

一、单行文本时

// overflow:hidden ; //溢出的部分隐藏 
// white-space: nowrap ; //文本不换行
// text-overflow:ellipsis ; //ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切
style=" display: block; overflow:hidden; white-space: nowrap ; text-overflow:ellipsis ; -o-text-overflow:ellipsis ;"
1
2
3
4

此方式是可行的，但是我之前适用的时候遇到了一个问题，就是我在 el-form-item 里面写样式，虽然实现了但是效果并不好，每次都需要刷新当前页，很不方便。当时百度了很多也没有找到什么原因，后面才知道是因为我用了 tooltip 做悬停展示的原因，导致style 样式没有对内容起作用。如果没有 tooltip 做悬停展示时，可以将样式写在 el-form-item 中，效果时一样的。
1

错误代码：

<el-col :span='12'>
  <el-form-item style=" display: block; overflow:hidden; white-space: nowrap ; text-overflow:ellipsis ; -o-text-overflow:ellipsis ;">
    <label slot="label">权益包适用范围:</label>
    <el-tooltip :content="applyRange" placement="top">
      <span>{{ applyRange == null?'--':applyRange }}</span>
    </el-tooltip>
  </el-form-item>
</el-col>
1
2
3
4
5
6
7
8

正确代码：

<el-col :span='12'>
  <el-form-item>
     <label slot="label">权益包适用范围:</label>
     <el-tooltip :content="applyRange" placement="top">
       <span style=" display: block; overflow:hidden; white-space: nowrap ; text-overflow:ellipsis ; -o-text-overflow:ellipsis ;">{{ applyRange == null?'--':applyRange }}</span>
     </el-tooltip>
   </el-form-item>
 </el-col>
1
2
3
4
5
6
7
8

二、多行文本时

// -webkit-line-clamp: 1;  数字 1 表示的是第一行，可以根据需要自行设置
style="width: 100%; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-inline-box;"

1
2
3

多行文本和单行文本是一样的，这里我就不做代码展示了，同样，如果适用 tooltip 做悬停展示就把 style 样式放在 内容展示里面，否则是可以放在 el-form-item 里面的。
1

三、悬停时提示全部文本内容，我使用的是 element-ui 插件，代码如下：

 <el-form-item
     label="xxx:"
     >
    <el-tooltip :content="单行文本过长或多行文本时，用省略号代替并悬停时提示全部文本内容" placement="top">
        <span style="width: 100%; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-inline-box;"> 单行文本过长或多行文本时，用省略号代替并悬停时提示全部文本内容 </span>
    </el-tooltip>
 </el-form-item>
1
2
3
4
5
6
7

content 绑定的是展示的内容
placement 是展示内容的位置
如果内容少，悬停时位置靠后，可以把 width 属性删除，这样看起来就比较舒服了

代码示例中使用的是多行文本省略的方法（-webkit-line-clamp: 1 ； 值为 1 做了单行省略），也可以使用上述单行省略的方法。