这篇文章主要介绍“css怎么实现多行超出省略号效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css怎么实现多行超出省略号效果”文章能帮助大家解决问题。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比牙克石网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式牙克石网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖牙克石地区。费用合理售后完善,10多年实体公司更值得信赖。
这种方法最简单,适用于只有一行文本内容。我们可以通过以下两行CSS代码实现:
overflow: hidden; text-overflow: ellipsis;
overflow为隐藏超过宽度限制的文本,text-overflow为超出后的表现方式,这里使用的是省略号。然而,这两行代码有一个限制,只适用于单行省略。如果文本有多个行,我们需要使用其他方法。
这个方法允许多行文本,并且每行文本最后一个单词的末尾处出现省略号。这里的关键在于使用display: -webkit-box;
来将文本容器转换成一个伸缩盒子:
.box { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 限制显示的行数 }
其中,-webkit-line-clamp表示限定文本显示的最大行数。如果想要显示更多行,只要把数字改大即可。
这种方法的缺点是只有支持Webkit内核的浏览器才能使用,所以在兼容性方面需要特别注意。
这种方法类似于“阅读全文”按钮,当用户将鼠标指针悬停在文本上时,全文才会显示。首先,我们需要将文本限定在容器的高度范围内,超出的文本被隐藏。然后,我们可以通过JavaScript的mouseenter和mouseleave事件来控制文本的显示和隐藏。
对于CSS部分,我们可以通过以下代码来实现:
.text { display: -webkit-box; -webkit-line-clamp: 3; //限定显示行数 -webkit-box-orient: vertical; overflow: hidden; } .show-text { display: block; cursor: pointer; }
用js实现事件的绑定及文本的显示与隐藏:
var text = document.querySelector('.text'); var textHeight = window.getComputedStyle(text).height; if(parseInt(textHeight) < text.scrollHeight) { text.classList.add('show-text'); text.addEventListener('mouseenter', function() { text.classList.remove('text'); }); text.addEventListener('mouseleave', function() { text.classList.add('text'); }); }
这种方法可以更好地控制文本的显示和隐藏,提升用户的体验,但是需要耗费更多的编码时间和动态效果实现。
Vue.js是一种前端框架,可以实现数据的双向绑定和页面的动态响应。在Vue.js中,我们可以通过过滤器实现多行省略号的效果。如下代码所示:
其中,v-html指令用于渲染文本内容,pipeline符号“|”用于协调过滤器和表达式。过滤器可以在Vue.js实例中定义,如下所示:
Vue.filter('multilineEllipsis', function(text, lines) { var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and']; var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g'); var len = 0; var result = ''; var lineCount = 0; while(len <= text.length && lineCount < lines) { var match = reg.exec(text.slice(len)); if(match && match.groups.line) { result += match.groups.line; len += match[0].length; } else { break; } if(len < text.length) { var nextchar = text[len]; if(nextchar !== ' ' && nextchar !== ' ' && nextchar !== '') { result += '...'; break; } } lineCount++; } if(len < text.length) { result += '...'; } return result; });
这个过滤器比较复杂,他会在文本中进行正则匹配,将每行符合要求的文本转换为对应的HTML,并保留省略号。这个过滤器还会你参照了常见英文单词的列表来制定正则表达式,提高了文本显示的质量。
关于“css怎么实现多行超出省略号效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。