想要在超过指定多行时才省略怎么弄？？-慕课网

首页课程实战体系课手记专栏慕课教程

想要在超过指定多行时才省略怎么弄？？

来源：4-1 CSS3文字与字体 text-overflow 与 word-wrap

慕前端4408879

2015-03-21 19:19

请教大神??

写回答关注

2回答

qq_莳萝泡菜_03359237: 2016-12-06 11:21:21

.test_demo{
    text-overflow:ellipsis;
    overflow:hidden;
    width:200px;
    height:99px;//设置高度
    background:#ccc;
    line-height:33px;//设置行高
    position:relative;//设置相对定位
    padding-right:30px;//添加一个padding值，为下一步显示...铺垫
}
.test_demo:after{//添加伪类，如果不明白什么是伪类，请搜索w3school~
    content:'...';
    position:absolute;//设置绝对定位
    right:0;
    bottom:0;
}

1 0

qq_莳萝泡...

这样子有一点bug，但是也能实现，如果要求更高的话，纯css不能实现，要用到jacascript等其他技术了.

2016-12-06 11:22:39

共 1 条回复 >