文本超出部分用省略号代替，鼠标移上去显示全部内容

已于 2022-03-08 12:18:30 修改
阅读量540 收藏 2
点赞数
分类专栏： css 文章标签： css
于 2022-03-08 12:16:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46472106/article/details/123350468
版权 
p{
	overflow: hidden;
    text-overflow: ellipsis; //超出部分以省略号显示
    white-space: nowrap;
    width: 280px; 
}
p:hover{
    overflow: visible;       
    text-overflow: inherit;          
}
qq_46472106
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js文本超出长度用省略号代替，鼠标悬停div显示
09-21
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
标题过长，省略显示，鼠标移上去显示全部
03-08
因为一个标题过长，省略显示的。然后当鼠标移上去的时候显示全部
内容溢出处理：隐藏显示省略号，鼠标悬停提示全部内容
jadetii的学习地盘
04-28 4555
备注：（1）div的文字会以省略的形式显示，并不是单独的截取。单独设定text-overflow:ellipsis;是没有效果的,因为它仅仅是注解，标注溢出时以省略的形式显示。所以必须要有white-space:nowrap，让文字显示子一行，又需要用overflow:hidden来使溢出的内容隐藏（配合使用）。
element 表格内容过长取前10字符，鼠标放上显示全部（该字段在表格中的排序）
xy405580364的博客
06-29 4857
需求 显示所有角色名（逗号分隔），最多显示两行（前10个字符），鼠标移动显示全部 实现代码 <el-table-column sortable="false" align="center" prop="rolesFormatter" width="140px" label="角色"> <template slot-scope="scope"> <el-popover placement="top-start" ..
Vue超出文本框显示省略号，鼠标滑过显示全部；Vue动态绑定title属性；使用ES6新增模板字符串进行拼接（反引号）
huangfuyk.的博客
04-30 1274
1. title定义和基础用法： title 属性规定关于元素的额外信息。 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。 提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性 众所周知，基础用法如下： 例： <html> <body> <p title="鼠标滑过 我就显示啦">Hello Word</p&gt
css文本超长显示省略号，鼠标hover省略号展示全部内容
xiaoxiannv666的博客
03-21 3730
再借助鼠标悬停标签展示其 title 内容的特性，为标签加上 title属性，实现我们想要的效果。首先，文字过长展示省略号。
css实现内容超出显示省略号且触碰显示完整内容
yuan0209的博客
11-26 3404
css实现内容超出显示省略号且触碰显示完整内容
Vue + Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的方法
pleaseprintf的博客
08-21 1万+
在 Vue 项目中，经常需要处理文本内容过长的情况。本文将介绍如何使用 Vue 和 Element UI 实现文本超出长度时显示省略号，并且鼠标移上后展示全部内容的效果。通过本文，你已经学会了如何使用 Vue 和 Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的效果。这种效果可以提升用户体验，特别是在处理长文本内容的场景中。希望本文对你在 Vue 项目中实现文本省略号和 Tooltip 效果有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
文字过长展示省略号且鼠标略过展示全部内容（不使用UI组件版）
weixin_52443895的博客
05-04 2700
实际的页面开发过程中，很多时候都会出现文字过长，想展示省略号，且鼠标掠过展示全部内容的情况，大多数时间都会选择使用UI组件的tooltip或poptip、加入以下样式即可实现过长展示省略号效果、给对应的标签加上title，代码如下，即可实现业务场景所述效果。
css实现文本框中内容超出长度显示省略号，鼠标移入悬浮显示全部内容
热门推荐
麻花猫耳朵的博客
12-14 3万+
实现文本超长以省略号的形式隐藏文本，达到不影响其他元素布局的效果；包括多行和单行文本的省略显示，以及应用此功能时，需要注意的属性之间冲突。
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
10-20
本篇文章主要介绍了js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示，具有一定的参考价值，有兴趣的同学可以了解一下。
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
主要介绍了CSS超出文本指定宽度用省略号代替和文本不换行的相关资料，小编觉的实用性非常，特此分享到脚本之家平台，供大家参考
js实现文字超出部分用省略号代替实例代码
11-25
话不多说，我们直接看代码 <!DOCTYPE ...<... <head>...超过的文字用省略号代替的js写法</title> </head> <bo
JQuery 控制内容长度超出规定长度显示省略号
10-25
主要介绍JQuery如何实现控制内容长度超出规定长度显示省略号,需要的朋友可以参考下
antd让form表单右对齐
qq_46472106的博客
03-08 3503
form表单对齐
取消滚动条 js
qq_46472106的博客
03-08 1303
js取消给滚动条
css中如何给行内元素设置宽高
qq_46472106的博客
08-09 840
如何给行内元素设置宽高 – 将行内元素设置为块级元素、脱离文档流 1) 使用display display:block/inline-block 2) 使用position position:absolute/fixed 3) 使用float float:left/right
css中如何让元素在父元素中水平或垂直居中
qq_46472106的博客
08-09 638
如何让元素在父元素中水平或垂直居中 一、行内元素：text-align：center line-height：height 二、块级元素： 1.给父元素设置display:flex属性 align-items:center justify-content:center 2.给父元素设置display：flex属性，给子元素设置margin：auto 3.给父元素设置定位属性，子元素设置绝对定位，并且使用配合属性left:50%;top:50%;让子元素左上角移动到父元素中心位置；然后再让子元素使用margi
js 文字超出部分用省略号替代 鼠标悬停时显示全部内容
最新发布
08-31
JS文本超出部分用省略号替代的需求经常在网页设计中出现。这样做可以有效地减少页面上冗长的文本显示，并给用户一个快速浏览的体验。一种常见的解决方案是使用CSS的文本溢出属性，结合JavaScript的悬停事件来实现。 首先，在CSS中定义文本溢出样式。使用`text-overflow:ellipsis;`属性可以让超出部分的文本显示省略号，同时，设置`white-space: nowrap;`属性可以防止文本换行。 接下来，在HTML中声明需要添加省略号的文本元素，并添加一个自定义的class名称，例如`ellipsis-text`。 然后，在JavaScript中编写相关的处理逻辑。首先，获取所有带有class名称为`ellipsis-text`的元素。然后，对每个元素绑定悬停事件，当鼠标悬停在文本上时，将元素的`title`属性设置为元素的全部文本内容，以显示完整的文本。当鼠标离开时，将`title`属性重置为空，以显示省略号。 下面是一个简单的实现示例： HTML部分： ```html <div class="ellipsis-text">这是一个超出部分用省略号替代的示例文本。</div> ``` CSS部分： ```css .ellipsis-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` JavaScript部分： ```javascript var elements = document.getElementsByClassName('ellipsis-text'); Array.prototype.forEach.call(elements, function(element) { element.addEventListener('mouseover', function() { element.title = element.innerText; }); element.addEventListener('mouseout', function() { element.title = ''; }); }); ``` 通过以上步骤，当鼠标悬停在文本上时，会显示全部的文本内容；鼠标离开时，文本又会被替换为省略号，从而实现了需求的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值