css实现文字太长以省略号显示,鼠标悬停时所隐藏的文字出现,挪开继续隐藏

省略号显示文字:

<div class="collect">文字内容文字内容文字内容文字内容文字内容</div>

设置文字省略号显示css属性:
单行文本溢出:

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

多行文本溢出:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

鼠标停留显示隐藏文字css属性:

.collect:hover{
			text-overflow:inherit;
			overflow: visible;
			white-space: pre-line;
			}
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值