Vue超出文本框显示省略号,鼠标滑入显示全部

这篇具有很好参考价值的文章主要介绍了Vue超出文本框显示省略号,鼠标滑入显示全部。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在开发过程中经常会遇到空间太小文字展示不全的问题,对于一些数据可能影响不大,但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了。解决办法:通过鼠标划入展示全部文字的效果用来解决。

一、通过 :title 实现鼠标划入展示对应信息的效果

        title属性的定义和用法

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。

<div title="鼠标划入显示我的信息">
  你好
</div>

二、添加文本太长显示省略号

width: 400px;//设置宽度
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。
white-space: nowrap;//只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

三、配合使用,实现功能

        添加cursor: pointer;属性鼠标划入显示小手,提高交互效果文章来源地址https://www.toymoban.com/news/detail-502962.html

<template>
  <div title="鼠标划入显示我的信息" class="title">你好你好你好你好</div>
</template>

<script>
export default {
  name: "HomeView",
  components: {},
  data:()=>{
    return {
      title:'鼠标划入显示我的信息'
    }
  }
};
</script>
<style>
.title {
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>

到了这里,关于Vue超出文本框显示省略号,鼠标滑入显示全部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue element表格某一列内容过多,超出省略号显示

    在使用element组件库里面的table组件时,遇到某一个字段内容过多,导致td高度被撑开,布局显得很不美观, 这时我们只要给table-cloumn添加一个属性show-overflow-tooltip。 实现超出隐藏,并有提示,这样的话会有下面效果: 提示的长度特别长,超出了屏幕,不太好看。  可以在处

    2024年02月15日
    浏览(37)
  • 文字内容超出两行时显示省略号

    设置内容超出两行显示省略号的css样式如下: 这个样式可用于uniapp的微信小程序开发。

    2024年02月13日
    浏览(55)
  • css 实现超出两行、多行文字省略号显示

    在我们日常使用文字超出省略号显示,一般使用下面的方式实现,但是当有需求需要实现两行乃至多行时,该怎么实现呢。 单行省略: 多行省略: ps:需要注意的是,记得控制元素width。

    2024年02月11日
    浏览(54)
  • 【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号

            element plus中el-table采用的是el-scrollbar,无法采用全局默认滚动条样式修改,需要单独写公共样式。 原生滚动条样式 el-table滚动条样式 效果图:         el-table设置了自定义样式后,为el-table-column添加fixed=\\\"right\\\"属性,此时表格侧边栏固定列出现样式错乱,自定义

    2024年02月12日
    浏览(52)
  • Element ui table表格内容超出隐藏显示省略号

    element ui官方文档上面有个参数 给el-table-column设置:show-overflow-tooltip=\\\"true\\\"属性可以使单元格超出的内容被隐藏显示为...当鼠标移入时单元格的上方会弹出一个tooltip来显示单元格的所有内容。 效果图: 有时候因为table中的文字非常的多,而show-overflow-tooltip默认是把折叠的内容全

    2024年02月11日
    浏览(33)
  • 多行文本溢出显示省略号

    文本溢出显示省略号分两种情况,单行文本溢出显示省略号(参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873),另外一种就是多行文本溢出显示省略号。 第一种: 使用定位伪元素遮盖末尾文字 步骤: 给父元素设置: 给父元素设置伪元素::after ,并为其设置属性:

    2023年04月08日
    浏览(44)
  • 【css】超过文本显示省略号

    显示省略号的前提:必须有指定宽度 一、单行文本超出部分显示省略号 属性 取值 解释 overflow hidden 当内容超过盒子宽度, 隐藏溢出部分 white-space nowrap 让文字在一行内显示, 不换行 text-overflow ellipsis 如果溢出的内容是文字, 就用省略号代替 二、多行文本超出部分显示省略号

    2024年02月13日
    浏览(40)
  • css多行文本溢出显示省略号

    在CSS中,对于多行文本的溢出显示省略号,可以使用 display 属性配合 -webkit-line-clamp 和 -webkit-box-orient 来实现。 具体实现步骤如下: 首先,将需要显示省略号的元素设置为块级元素,并且固定高度。 接着,使用 -webkit-box-orient 属性将元素内部的子元素按照垂直方向排列。 然后

    2024年02月11日
    浏览(43)
  • css单行文本溢出显示省略号

    可以使用CSS中的 text-overflow 属性来实现单行文本溢出显示省略号。 具体实现步骤如下: 首先,将需要显示省略号的元素的宽度设置为固定值或最大宽度。 接着,使用 white-space 属性将元素的文本内容强制放在一行中,防止换行。 然后,使用 overflow 属性将超出元素宽度的文本

    2024年02月11日
    浏览(42)
  • React Native从文本内容尾部截取显示省略号

    参考链接: https://www.reactnative.cn/docs/text#ellipsizemode https://chat.xutongbao.top/

    2024年02月14日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包