Vue + Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的方法

妖狐艹你老母 2023-10-14 23:59 59阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、使用 CSS 实现省略号效果
 *  二、使用 Element UI 的 Tooltip 组件实现悬浮展示全部内容
 *   *  1.安装 Element UI
     *  2.在组件中使用 Tooltip 组件
 *  总结

--------------------

## 前言 ##

在 Vue 项目中，经常需要处理文本内容过长的情况。本文将介绍如何使用 Vue 和 Element UI 实现文本超出长度时显示省略号，并且鼠标移上后展示全部内容的效果。

--------------------

## 一、使用 CSS 实现省略号效果 ##

首先，我们可以使用 CSS 的 text-overflow 属性来实现文本超出长度时显示省略号。同时，设置 white-space: nowrap; 防止换行，以及 overflow: hidden; 隐藏多余的内容。

在 Vue 组件的样式中添加以下代码：

.ellipsis {
        
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

## 二、使用 Element UI 的 Tooltip 组件实现悬浮展示全部内容 ##

要实现鼠标移上显示全部内容的效果，可以借助 Element UI 的 Tooltip 组件。

### 1.安装 Element UI ###

首先，确保你的项目已经安装了 Element UI。如果没有安装，可以使用以下命令安装：

npm install element-ui

### 2.在组件中使用 Tooltip 组件 ###

在需要显示文本的地方，使用 Tooltip 组件将内容包裹起来。当鼠标移上时，Tooltip 会显示全部内容。

<template>
      <div>
        <div class="ellipsis" v-tooltip="text">{
        {
         text }}</div>
      </div>
    </template>
    
    <script>
    import {
         Tooltip } from 'element-ui';
    
    export default {
        
      components: {
        
        [Tooltip.name]: Tooltip,
      },
      data() {
        
        return {
        
          text: '这是一个超长的文本内容，当鼠标移上时将显示全部内容。',
        };
      },
    };
    </script>
    
    <style>
    .ellipsis {
        
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 200px; /* 超过该宽度将显示省略号 */
    }
    </style>

注意事项：

在上述示例中，v-tooltip 指令用于绑定 Tooltip，当鼠标移上时会显示全部内容。  
你可以根据需要调整宽度、样式和提示内容。

## 总结 ##

通过本文，你已经学会了如何使用 Vue 和 Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的效果。这种效果可以提升用户体验，特别是在处理长文本内容的场景中。

希望本文对你在 Vue 项目中实现文本省略号和 Tooltip 效果有所帮助。如果你有任何问题或疑问，欢迎留言讨论。感谢阅读！