结合el-tooltip,实现内容过长省略,移上显示全部

文章介绍了如何在系统中处理内容过长时的省略显示,包括CSS的常见解决方案和Vue组件的改进版本,如el-tooltip的应用,以及带查看全部按钮的实现。作者寻求更优雅的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在系统中,内容过长需要省略,鼠标移上显示全部,这个是常用的功能,也有很多方案解决这种。

单行内容超出处理
常用的css方案:
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

该样式在宽度有限制的情况下使用,超出容器宽度的文本将被隐藏,并显示省略号。

注意flex布局flex:1的时候,需要设置min-width:0,否则无效;

但是实际情况下,系统希望超出部分,在鼠标移上显示全部,这时候可能就需要el-tooltip、title、或者popup处理,鼠标移上显示,但是这样会导致,没有超出的情况,鼠标经过也会有提示,不完美。

改进版本方案:
<template>
  <el-tooltip effect="light" :content="content" placement="top" :disabled="isDisabled">
    <div class="cm-tooltip" @mouseover="mouseoverHandle">
      <span ref="contentRef">{{ content }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    content: [String, Number],
  },
  data() {
    return {
      isDisabled: false,
    };
  },
  methods: {
    mouseoverHandle() {
      const parentWidth = this.$refs.contentRef.parentNode.offsetWidth;
      const width = this.$refs.contentRef.offsetWidth;
      this.isDisabled = width <= parentWidth;
    },
  },
};
</script>

通过一个全局组件,来是现实,使用类似el-tooltip,方便简单。

通过行内元素(span)不能设置高宽,高宽是根据它实际内容撑起来的,如果内容超出,其宽度一定会比实际父元素(块元素)宽度大,所以能实现,超出时才有tooltip,没超出就隐藏tooltip;

多行内容超出处理

常用的css方案:

.ellipsis-line-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-break: anywhere;
    -webkit-box-orient: vertical;
}

主要通过-webkit-line-clamp处理,超出多行;

改进方案
<template>
  <el-tooltip effect="light" :content="content" placement="top" :disabled="isDisabled">
    <div class="cm-two-tooltip" @mouseover="mouseoverHandle">
      <span ref="contentRef">{{ content }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    content: [String, Number],
  },
  data() {
    return {
      isDisabled: false,
    };
  },
  methods: {
    mouseoverHandle() {
      const parentHeight = this.$refs.contentRef.parentNode.offsetHeight;
      const height = this.$refs.contentRef.offsetHeight;
      this.isDisabled = height <= parentHeight ;
    },
  },
};
</script>

这个方案跟单行改进方案思路一样,只是多行需要用到了高度来处理。

带查看全部按钮
<script setup>
import { ref, watch, nextTick } from 'vue';

const props = defineProps({
  chanceData: { type: Array, default: () => [] },
});

const chanceContainer = ref(null);
const showViewBtn = ref(false);
const moreHandler = () => {
  let height = chanceContainer.value.scrollHeight;
  if (height > 106) {
    showViewBtn.value = true;
  } else {
    showViewBtn.value = false;
  }
};

watch(
  () => props.chanceData,
  () => {
    nextTick(() => {
      moreHandler();
    });
  },
  { immediate: true }
);
</script>

<template>
  <div class="chance-item" :class="{ 'chance-border': chanceData.length }" ref="chanceContainer">
    <div v-for="item in chanceData" class="chance-li">{{ item.name }}</div>
    <div class="view-btn" v-popover:chancePopover v-show="showViewBtn">查看全部</div>
    <el-popover ref="chancePopover" width="600" trigger="click">
      <div v-for="item in chanceData" class="chance-li">{{ item.name }}</div>
    </el-popover>
  </div>
</template>

<style scoped lang="less">
.chance-item {
  height: 104px;
  padding: 9px 12px;
  overflow: hidden;
  position: relative;
  &.chance-border {
    border: 1px solid #dcdee0;
    border-radius: 2px;
  }
}
.view-btn {
  position: absolute;
  color: #3874c5;
  background-color: #fff;
  right: 12px;
  bottom: 9px;
  cursor: pointer;
}
.chance-li {
  position: relative;
  padding-left: 12px;
  line-height: 22px;
  &::before {
    content: '';
    position: absolute;
    background-color: #595f6d;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 0;
    top: 8px;
  }
}
</style>

实现思路也是一致,也是通过css和js判断来实现!

大家有更好更优雅的方案,欢迎给我提意见 

### 解决方案 对于 `el-tooltip` 内容过长的问题,可以通过以下方法来实现自动换行或截断: #### 方法一:通过 CSS 实现内容换行 如果希望 `el-tooltip` 的内容能够自动换行,则可以在项目的全局样式文件中定义特定的类名,并将其应用到 `el-tooltip` 中的内容区域。 以下是具体的实现方式: ```css .tooltip-content { white-space: pre-wrap; /* 支持换行 */ word-break: break-word; /* 长单词允许换行 */ } ``` 在 Vue 组件中使用该样式时,可以这样设置: ```html <el-tooltip content="这是一个非常长的文字提示信息,用于测试换行效果。" placement="top"> <span class="tooltip-trigger">悬停查看</span> </el-tooltip> <style scoped> ::v-deep(.el-tooltip__popper) { max-width: 300px; /* 设置最大宽度 */ white-space: pre-wrap; word-break: break-word; } </style> ``` 上述代码中的 `max-width` 属性限制了工具提示框的最大宽度[^1],而 `white-space: pre-wrap` 和 `word-break: break-word` 则确保内容能够在指定范围内正常换行[^2]。 --- #### 方法二:通过 JavaScript 动态截取内容 当需要对超长内容进行截断并提供完整的 Tooltip 提示时,可以先对原始数据进行处理,在界面上仅显示部分内容,完整内容则作为 Tooltip 的 `content` 值传递给组件。 例如: ```javascript methods: { truncateText(text, maxLength) { if (text.length > maxLength) { return `${text.slice(0, maxLength)}...`; } return text; }, }, computed: { truncatedContent() { const maxLength = 50; // 截断长度 return this.truncateText(this.longText, maxLength); }, }, data() { return { longText: '这是一段非常长的文本,可能超过屏幕范围,因此我们需要对其进行截断处理。', }; }, ``` 对应的模板结构如下: ```html <el-tooltip :content="longText" placement="top"> <span>{{ truncatedContent }}</span> </el-tooltip> ``` 这种方法适用于既想保留界面简洁又不想丢失完整信息的场景[^4]。 --- #### 方法三:结合 ECharts 或其他图表库的自定义 Tooltip 如果是针对类似于 ECharts 图表的情况,可以直接修改其内部的 Tooltip 样式以支持换行和截断功能。具体做法是在初始化配置项中加入相应的 CSS 类名或者直接嵌入 HTML 片段。 例如: ```javascript option = { tooltip: { formatter(params) { let htmlStr = `<div class="tooltip-wordWrap"><div class="title">${params.seriesName}</div>`; params.data.forEach(item => { htmlStr += `<div><span class="name">${item.name}:</span> <span class="value">${item.value}</span></div>`; }); htmlStr += '</div>'; return htmlStr; }, }, }; ``` 配合前面提到的 `.tooltip-wordWrap` 样式即可完成复杂布局下的换行需求[^3]。 --- ### 总结 以上三种方法分别解决了不同场景下 `el-tooltip` 内容过长的问题。可以根据实际业务需求选择适合的方式加以实施。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值