Tooltip 文字提示

在偶然维护前端开发时，遇到页面列表中某个字段内容太长，且该字段使用了组件显示，导致不能使用纯文本得那个省略号代替显示得css样式效果，如下

所以只能另辟溪路了，

1、最开始想到是使用横向滚动得效果来实现，但是实现后，感觉还是不太理想，因为用户注意不到你这里有滚动，除非显示出滚动条，但是影响页面整体样式效果。

效果如下：主要是调整css样式来实现得

前端代码：

<el-table-column
        label="示范区域"
        align="center"
        prop="creationTime"
        :show-overflow-tooltip="true"
        width="120"
      >
        <template slot-scope="scope">
          <div class="tag tag-scroll-wrapper" style="display: flex; justify-content: center; align-items: center;">
            <el-tag
              v-for="(item, index) in scope.row.projectAreas"
              :key="index"
              size="small"
              type="success"
              class="tagItem"
            >{
  { item.fullAreaName }}</el-tag>
            <!-- <el-tooltip class="item" effect