1.文本框超出设定宽度写入css样式文字溢出隐藏显示省略号

    width: 300px; //文字宽度
    overflow: hidden; //超出宽度隐藏
    white-space: nowrap;  //强制文字在一行
    text-overflow: ellipsis; //文字溢出显示省略号
 

2.文字溢出增加弹窗 显示完整信息  popper-class="需要添加的类名"

(如果改变一个el-tooltip 则全局都会改变,并且写的样式不能写在scoped样式标签里。需要重新写一个样式标签单独放,因此我们可以使用增加 popper-class 就可以解决上述问题!)

  <span class="date">
              <el-tooltip
                effect="dark"
                :content="内容"
                placement="top"
                popper-class="需要添加的类名"
              >
                <span style="white-space: nowrap">{{
                  item.startWorkDtae
                }}</span>
              </el-tooltip>
</span>

3.修改el-tooltip 样式(这样修改 只会作用于popper-class 绑定的class类上,而且与全局的互不影响)

<style>
//atooltip 定义的类名
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #24389f;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #24389f;
}
.atooltip {
  background: #24389f !important;
}
</style>

如图,修改后的效果

​​​​​​​

希望可以帮助到你!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐