小程序是不是不支持多行文本省略显示的css语法?

.post-content{
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
padding: 20rpx;
text-align: left;
text-indent: 2em;
/* 文本设置 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
white-space: normal!important;
word-wrap: break-word;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;
}

显示效果是这样的,怎么解决?

LeslieChan994 2020-02-25

源自：实战：小程序新闻网站列表页 3-4 构建新闻列表（3）

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2020-02-26 10:29:57

同学你好，是的哦。

祝学习愉快~

收起回答

好帮手慕糖 2020-02-25 19:21:55

同学你好，看着后面是有省略号的哦。css3这个也是当前行存放不下就隐藏了。

至于同学这个下一行还有显示，是这部分的内容吗？建议：可以给存放文字的元素，添加一个背景，看是否包括这部分。

若还是无法解决，建议：将完整的代码粘贴过来，便于准确的定位与解决问题。

祝学习愉快~

收起回答

提问者 LeslieChan994 #1

刚才检查了下,其实是因为文本的容器设置了padding值,导致文本的实际显示长度比默认的容器width为100%要小了padding*2的值,所以文字被挤下来了,试着去掉了padding,用margin来控制就没问题了,顺便问一句,盒子模型中padding是算入了实际整个盒子的大小了吧?(除了border-box),外边距margin无论什么box-sizing属性都不计算到盒子的实际大小中吧?

2020-02-25 19:56:38