/* 核心样式：限制p标签最多显示2行，超出隐藏 */
p {
/* 基础布局：必须设置宽度（否则无法触发截断） */
width: 300px; /* 可根据实际需求调整，比如100% */...
/* 核心样式：限制p标签最多显示2行，超出隐藏 */
p {
/* 基础布局：必须设置宽度（否则无法触发截断） */
width: 300px; /* 可根据实际需求调整，比如100% */
/* 核心：行数限制相关 */
display: -webkit-box; /* 弹性盒模型（webkit内核特有） */
-webkit-line-clamp: 2; /* 限制显示的行数 */
-webkit-box-orient: vertical; /* 内容垂直排列 */
/* 溢出处理 */
overflow: hidden; /* 超出容器的内容隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号（多行时仅webkit内核生效） */
/* 可选：优化样式 */
line-height: 1.5; /* 行高，影响每行的高度 */
word-break: break-all; /* 防止长单词/连续字符撑破容器 */
white-space: normal; /* 恢复正常换行（避免继承其他样式导致失效） */
}代码关键部分解释
-webkit-line-clamp: 2：这是核心属性，直接指定显示的最大行数为 2（改为 3 就是最多 3 行），但该属性仅在 Webkit 内核浏览器（Chrome、Safari、Edge 等）生效，是目前实现多行文本截断最简洁的方式。
display: -webkit-box + -webkit-box-orient: vertical：必须配合 -webkit-line-clamp 使用，让文本以垂直弹性盒的方式排列，才能触发行数限制。
overflow: hidden：隐藏超出容器的内容，是截断的基础。
width：必须设置固定 / 百分比宽度，否则 <p> 会随文本宽度自适应，无法触发 “溢出”。
text-overflow: ellipsis：多行时仅 Webkit 内核会在最后一行末尾显示省略号，非 Webkit 内核（如旧版 Firefox）仅隐藏内容但无省略号（如需兼容可参考文末补充）。