判断css文字发生了截断,增加悬浮提示

这篇具有很好参考价值的文章主要介绍了判断css文字发生了截断,增加悬浮提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

示例:

判断css文字发生了截断,增加悬浮提示,vue,css,css,前端

固定显示宽度,溢出显示...,利用了css的属性,想要实现成下面这样: 

判断css文字发生了截断,增加悬浮提示,vue,css,css,前端

针对溢出的文字,hover显示全部。 

提示很好加,使用tooltip组件就行了,难点是如何判断是否发生了文字溢出。

利用dom元素的可视宽度 clientWidth 实际宽度 scrollWidth 不同就可以比较出是否发生了文字溢出。

 实际宽度 > 可视宽度  = 文字溢出

判断css文字发生了截断,增加悬浮提示,vue,css,css,前端

那么就可以依此来判断,如下图所示,给各行增加ref属性,鼠标移入时判断是否显示对应行的提示信息。

判断css文字发生了截断,增加悬浮提示,vue,css,css,前端

判断css文字发生了截断,增加悬浮提示,vue,css,css,前端

我这里之所以鼠标移入时触发计算,是因为我卡片的宽度是动态变化的,若你那块内容宽度固定,可以在数据获取完成之后直接计算showTooltipObj的值。

全部代码如下图所示:文章来源地址https://www.toymoban.com/news/detail-759377.html

<template>
  <div class="card">
    <ul>
      <li v-for="(item, index) in rows" :key="item.key" class="content">
        <b>{{ item.label }}:</b>
        <el-tooltip
          effect="dark"
          placement="top"
          :disabled="!showTooltipObj[index]"
          max-width="600px"
        >
          <div slot="content">
            <span>{{ data[item.key] || '--' }}</span>
          </div>
          <span
            :ref="`rowValue${index}`"
            class="value"
            @mouseenter="mouseenterFn(index)"
          >
            <span>{{ data[item.key] || '--' }}</span>
          </span>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Card",
  data() {
    // 这里存放数据
    return {
      rows: [
        {
          label: "姓名",
          key: "name",
        },
        {
          label: "年龄",
          key: "age",
        },
        {
          label: "爱好",
          key: "hobby",
        }
      ],
      data: {
        name: "张三",
        age: 10,
        hobby: "吃饭、睡觉、打篮球、玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩",
      },
      showTooltipObj: {},
    };
  },
  methods: {
    mouseenterFn(index) {
      this.$nextTick(() => {
        const dom = this.$refs[`rowValue${index}`][0];
        let flag = false;
        // 实际宽度 > 可视宽度  文字溢出
        if (dom.scrollWidth > dom.clientWidth) {
          flag = true;
        }
        this.$set(this.showTooltipObj, index, flag);
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.card {
  margin: 40px;
  width: 400px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 20px 0;
  li.content {
    margin: 0 20px;
    line-height: 22px;
    display: flex;
    b {
      white-space: nowrap;
    }
    .value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>

到了这里,关于判断css文字发生了截断,增加悬浮提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 行内元素文字背景被截断的问题,如何进行修改?

    这里背景是被截断的,有什么css样式可以修改它呢? 不一样的地方在于这里的截断位置是引用了开头和结尾的位置。 如何实现? 代码原理 MDN文档 不想看MDN box-decoration-break 属性用来定义当元素跨多行、多列或多页时,元素的片段应如何呈现。 值 slice 元素被按照盒子被切割

    2024年02月07日
    浏览(34)
  • vue3中使用codemirror6增加代码提示功能

    1、安装依赖 // 安装codemirror、语言包、主题、自动补全 本人安装的版本是 2、创建编辑器

    2024年02月15日
    浏览(43)
  • 【Opencv】PIL Opencv 向图片写入文字并旋转文字,Opencv图片旋转不截断,Opencv图片旋转不裁剪

    刚性变换: 只有物体的位置(平移变换)和朝向(旋转变换)发生改变,而形状不变,得到的变换称为刚性变换。刚性变换是最一般的变换。 使用透视变换,文字会扭曲失真。刚性变换就不会。 一些介绍: https://blog.csdn.net/liuweiyuxiang/article/details/86510191 创建一张空图写文字: 旋转

    2024年02月11日
    浏览(51)
  • Ant Design Vue实现表格双击编辑、添加新行、文字提示

    早上刚上班,产品就朝我工位走了过来,一看大事不好,肯定又是来提需求的! 产品:做一个表格,要实现双击编辑的功能 我:做不了 产品:老板提的 我:好的,可以做 老板提的不能做也滴做😂 申明:项目基于Vue+Ant Design实现 想要实现双击编辑单元格,先开发一个简单的

    2024年02月11日
    浏览(47)
  • css3瀑布流布局遇见截断下一列展示后半截现象

    注:css3实现瀑布流布局简直不要太香~~~~~ 包括分割线的颜色、样式、宽度。其语法格式为: column-rule: column-rule-width || column-rule-style || column-rule-color 简单的例子: 这里就不给实例了,感兴趣的可以自己去尝试一下

    2024年02月13日
    浏览(39)
  • css3 瀑布流布局遇见截断下一列展示后半截现象

    注:css3实现瀑布流布局简直不要太香~~~~~ 当瀑布流布局column-grap:10px 相邻两列之间的间隙为10px,column-count:2,2列展示时,就出现了截断问题,如下图: 代码如下: 修改后的代码如下: 包括分割线的颜色、样式、宽度。其语法格式为: column-rule: column-rule-width || column-

    2024年02月13日
    浏览(31)
  • Unity悬浮显示提示内容

    在编写unity时,需要实现鼠标在某一个按钮上时,就显示其子物体中对应的下拉菜单,为此编写了一个公共类,对于需要悬浮显示的控件均可挂载此类。代码如下: 该类的应用场景还可以放在图标类型的功能按钮上,悬浮在功能按钮上时功能按钮的名称,方便区分按钮的功能

    2024年02月13日
    浏览(38)
  • Unity3D实现鼠标悬浮UI或物体上显示文字信息

    Unity工具 大家好,我是心疼你的一切,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 本篇文章实现一个鼠标悬浮在ui或者物体上显示文字的功能 unity鼠标悬浮ui显示文字 鼠标进入UI执行的 鼠标离开UI执行的 鼠标在ui里滑动执行的 1. 2. 搭建比较简单,各位顺便搭建吧。

    2024年02月04日
    浏览(82)
  • CSS鼠标悬浮及其样式

    示例 选择鼠标指针浮动在其上的元素,并设置其样式: 定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示 :hover 选择器可用于所有元素 :link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于

    2024年02月10日
    浏览(39)
  • CSS鼠标悬浮图片模糊切换效果

    当我们想设置在鼠标移入前,图片是半透明(模糊)的,在我们鼠标移入后,图片就变得清晰,这里我们可以设置css的伪类:hover来实现: 首先我们在body中写一个div模块,这个div包裹了两个部分,一个部分就是我们要用的img,第二部分就是文字,文字部分也用一个div包裹。

    2024年02月10日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包