Vue+Elementui realizes too much text in the text box overflows and hides, the mouse moves into the display and customizes the pop-up window style

1. The text box exceeds the set width and writes css style text overflow to hide and display ellipsis

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

2. Text overflow adds a pop-up window to display complete information popper-class="The class name that needs to be added"

(If you change an el-tooltip, the whole world will change, and the written style cannot be written in the scoped style tag. You need to rewrite a style tag and put it separately, so we can solve the above problem by adding 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. Modify the el-tooltip style (this modification will only be applied to the classes bound by popper-class, and will not affect the global ones)

<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>

As shown in the figure, the modified effect

​​​​​​​

Hope it can help you!