背景：
在css中实现文本显示两行，超出部分显示省略号（...），可以通过组合display:-webkit-box、-webkit-line-clamp和text-overflow:ellipsis等属性来实现。
单行省略: white-space:nowrap
多行省略: -webkit-line-clamp:2
注意:如果混合了单行省略和多行省略，会导致冲突，无法正确显示两行文本省略效果。
问题分析:
- white-space:nowrap 会限制单行显示
nowrap会阻止文本换行，导致 -webkit-line-clamp失效。
解决办法：移除-webkit-line-clamp，让文本可以自动换行。
示例代码:
.two-lines{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.5;
}
- 父容器没有固定宽度，文本可能不换行
解决办法：确保父元素有宽度限制（如 max-width）
- IE/旧版浏览器不支持，需要使用max-height 和 ：:after方案
或使用JavwScript库（如 clamp.js）
如果-webkit-line-clamp不兼容某些浏览器（如旧版firefox）,可以使用max-height结合::after伪元素模拟省略号。
示例代码：
.falkback-ellipsis{
position:relative;
max-height:4.5rem;//3行1.5行高
line-height:1.5;
overflow:hidden;
}
.falkback-ellipsis::after{
content:"...";
position:absolute;
bottom:0;
right:0;
background:white;//防止文字穿透
padding-left:5px;
}
一、关键点总结
-webkit-line-clamp
适用于现代浏览器
兼容性：Chrome、Safari、Edge、Firefox
备注：最简单最推荐
max-height ＋ ::after伪元素
兼容旧版浏览器，如IE、旧版Firefox
兼容性：所有浏览器
备注：需要手动调整max-height
二、属性详细，知识点
属性及其作用，罗列如下：
display:-webkit-box;
启用多行省略。
-webkit-box-orient:vertical;
垂直排列文本。
-webkit-line-clamp:2;
限制2行。
overflow:hidden;
隐藏溢出内容。
text-overflow:ellipsis;
显示省略号。
line-height:1.5;
控制行高，使得省略号对齐。
其它属性：
white-space:nowrap;
会强制单行显示。