div文字溢出自动加省略号

div文字溢出自动加省略号

1、纯CSS方法。(推荐)

.text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

优点:兼容各大主流浏览器。被省略的文字在源代码里仍然保留,利于SEO。

 

2、jQuery 函数:ellipsis();

调用方法:
1.$(document).ready(function() {
2.    $('.ellipsis').ellipsis();
3.}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 可以通过 CSS 和内置指令 v-text-overflow 来实现文字溢出后点击省略号展示更多的效果。 首先,可以定义一个包含溢出文本的容器,并限制其宽度和高度,使得文本溢出时可以产生省略号。例如: ```html <div class="text-container"> {{ longText }} </div> ``` 然后,通过 CSS 样式来设置溢出文本的省略号和点击展示更多的特效: ```css .text-container { overflow: hidden; /* 溢出内容隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 不换行 */ width: 200px; /* 容器宽度 */ height: 20px; /* 容器高度 */ } .text-container:hover { overflow: visible; /* 鼠标悬停时展示全部内容 */ height: auto; /* 自动调整高度以完整显示文本 */ } ``` 最后,在 Vue 中使用 v-text-overflow 指令将文本绑定到容器中,并通过鼠标事件来切换展示状态: ```html <div class="text-container" v-text-overflow="longText"></div> ``` ```javascript Vue.directive('text-overflow', { inserted: function (el, binding) { el.textContent = binding.value; el.addEventListener('mouseover', function () { el.style.overflow = 'visible'; el.style.height = 'auto'; }); el.addEventListener('mouseleave', function () { el.style.overflow = 'hidden'; el.style.height = '20px'; }); }, }); ``` 通过以上代码,在文本溢出时,鼠标悬停在容器上时将展示全部文本,移开鼠标时将再次显示省略号。这样,就实现了通过点击省略号展示更多文本的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值