文字超出限定长度后省略显示

说明：列表字段或卡片文字超出限定长度后，用“...”省略代替，当鼠标移到上方时则显示所有文字信息。

效果图：

代码如下：

     <div class="projectName">

          <!-- 判断项目名称长度，如果长度小于8 全部显示，如果长度大于8则以“..."代替，鼠标移至上方才全部显示 -->

          <span v-if="pro.name.length < 8">{{ pro.name }}</span>

          <el-tooltip

            v-else

            class="box-item"

            effect="dark"

            :content="pro.name"

            placement="top"

          >

            {{ pro.name.slice(0, 8) }}...

          </el-tooltip>

        </div>

     </div>

 

        <!-- 负责人文本 -->

        <div class="leader" v-if="pro.leader.length < 8">

          负责人-{{ pro.leader }}

        </div>

        <div class="leader" v-else>

          <el-tooltip

            class="box-item"

            effect="dark"

            :content="pro.leader"

            placement="top">

            负责人-{{ pro.leader.slice(0, 8) }}...

          </el-tooltip>

        </div>

 

        <!-- 操作按钮 -->

        <div class="btn_icon">

          <el-button icon="Edit" size="small" @click="clickEdit(pro)"

            >编辑</el-button

          >

          <el-button icon="Delete" size="small" @click="clickDelete(pro.id)"

            >删除</el-button

          >

        </div>

 

 

--end---