登录

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

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

这是线上测试的图片

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

# JavaScript
迷茫迷茫2197 天前558 次浏览

全部回复(5) 我要回复

  • 阿神

    阿神2017-04-10 17:20:47

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

    回复
    0
  • 迷茫

    迷茫2017-04-10 17:20:47

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

    回复
    0
  • PHPzhong

    PHPzhong2017-04-10 17:20:47

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

    回复
    0
  • 天蓬老师

    天蓬老师2017-04-10 17:20:47

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

    回复
    0
  • ringa_lee

    ringa_lee2017-04-10 17:20:47

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

    p{
        position: relative;
        width: 100%;
        height: 5em;
        overflow: hidden;
    }
    p::after{
      content:'...';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 3em;
      height: 1em;
      background-color: #fff;
    }

    回复
    0
  • 取消回复发送