限制文本行数,超出... 桃扇骨 2022-10-26 12:58 161阅读 0赞 如图:超出限制行数显示… ![在这里插入图片描述][2021020211141871.png] 可以用css实现 > 单行文本 .text { width: 100%; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } > 多行文本 .text { width: 190px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 在vue中也可以用过滤器filters实现 <div> { { text | cutOut }} </div> export default { filters: { cutOut(val) { if (!val) return '' if (val.length > 10) { return val.slice(0,10) + '...' } return val } } } [2021020211141871.png]: /images/20221024/19dec12d03c44369bd8fe1b0a17c090d.png
还没有评论,来说两句吧...