实现文字超出展示展开全文的效果
2020-07-03 本文已影响0人
菜鸟的平凡之路
实现文字超过固定行数时展示展开全文的功能
- 通过css方式实现超出5行隐藏文本内容
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
-
使用js方式计算line-height
判断超出5行隐藏了
- 使用v-text渲染文本内容
this.$nextTick(() => {
if(dom.offsetHeight < dom.scrollHeight) {
// 显示展开全文按钮
}
})
单行文本超出隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;