文本单行或多行超出显示省略号

最新推荐文章于 2024-08-18 10:54:49 发布

杨天天.

最新推荐文章于 2024-08-18 10:54:49 发布

阅读量323

点赞数

文章标签： css3 css html

原文链接：https://blog.csdn.net/weixin_42069147/article/details/104351583

版权

本文讲述了在Vue项目中如何通过内联样式确保-webkit-box-orient:vertical;正确生效，以实现多行文本省略显示。遇到打包后测试环境失效的问题，解决方案是在内联style属性中设置该样式。

摘要由CSDN通过智能技术生成

网上搜到的

// 单行显示省略号
p {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}


// 多行显示省略号，数字2为超出2行显示，
p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

在vue项目中 -webkit-box-orient: vertical;
这行一定要写在内联样式style=" -webkit-box-orient: vertical;"里面，
vue项目在打包后webpack会忽略这一行，所以你会发现在打包后的测试环境里面根本显示不了之前的控制两行显示并且超出显示省略号，我也是找了好久对比后才发现测试环境里这行没有显示，就没有效果，写在内联样式里就可以了。
————————————————
版权声明：本文为CSDN博主「深海有鱼呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42069147/article/details/104351583