.text-container {
word-break: break-all;
/* 设置最大显示行数 */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
/*盒子中内容竖直排列*/
-webkit-box-orient: vertical;
overflow: hidden;
/*显示省略号*/
text-overflow: ellipsis;
}
请注意,
-webkit-line-clamp
是一个非标准的CSS属性,仅在WebKit浏览器上有效。
如果需要兼容其他浏览器,可以考虑使用JavaScript或其他CSS技术来实现类似的效果。