首页 > 多行溢出隐藏,文本溢出后直接显示...,后面带上read more链接,跳转至详情页面

多行溢出隐藏,文本溢出后直接显示...,后面带上read more链接,跳转至详情页面

<script type="text/javascript" src="js/jquery.dotdotdot.min.js"></script>
    $(function() {
        $('.dot').dotdotdot({
        after: 'span.readmore'
    });
</script>

这是线上测试的图片

第二章图是本地测试的效果,线上测试时,有文字溢出的内容直接显示...,
不能通过为元素设置溢出显示...,Read more 是一个链接,


overflow:hidden;
text-overflow: hidden;
white-space: no-wrap;


楼上的似乎只能解决单行问题,多行溢出建议用js实现,单纯用css好像挺麻烦的


使用dotdotdot.js 完成多行溢出隐藏,使用after设置...后面添加Read more


兄弟,Google CSS文本溢出比这里问高效一百倍


纯css可以实现的,容器高度定死,超出隐藏,再用伪元素遮挡最后两三个字,就行了

div{
    position: relative;
    width: 100%;
    height: 5em;
    overflow: hidden;
}
div::after{
  content:'...';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3em;
  height: 1em;
  background-color: #fff;
}
【热门文章】
【热门文章】