javascript - 多行溢出隐藏,文本溢出后直接显示...,后面带上read more链接,跳转至详情页面
迷茫
迷茫 2017-04-10 17:18:47
0
5
800
<script type="text/javascript" src="js/jquery.dotdotdot.min.js"></script>
    $(function() {
        $('.dot').dotdotdot({
        after: 'span.readmore'
    });
</script>

这是线上测试的图片

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全員に返信(5)
阿神

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

いいねを押す +0
迷茫

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

いいねを押す +0
PHPzhong

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

いいねを押す +0
Peter_Zhu

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

いいねを押す +0
左手右手慢动作

纯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
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート