关于固定高度和宽度,文字多少控制问题

原创
2016/11/01 17:01
阅读数 47

今天在写页面的时候,遇到了一个显示问题,我的要求是:在一个固定长和宽的盒子中,文字若多了末尾显示“...”

首先要让文字显示“...”,给盒子加的样式是:

.intro .docIntro .docGood {
    width: 100%;
    line-height: 1.5;
    font-weight: bolder;
    font-weight: 400;
    text-indent: 1em;
    height: auto;
    max-height: 4.5em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

以上显示的样式虽然有了“...”的效果,但是多余的文字还是会显示在下一行。如图:

然后,为了解决这个问题,给样式再加一个

overflow: hidden;

这样就正常了。哈哈~~~

-webkit-line-clamp: 3;

这行代码是最多显示3行的意思哦@@

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部