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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐