移动端三行文字显示不全的根本原因是缺失多行截断样式，需用-webkit-line-clamp配合display:-webkit-box等属性实现；注意兼容性、响应式控制及避免与flex布局冲突。
移动端默认只显示一行文字，三行文字被截断或撑开布局——根本原因是 bootstrap 的 text-truncate、line-clamp 缺失，且默认 p 或 div 没有强制行数限制和省略样式。
移动端三行文字显示不全的常见表现
文字在手机上只显示一两行，后面被裁掉；或者容器高度异常撑大，破坏栅格对齐；用 text-truncate 也无效——因为这个类只支持单行截断（靠 white-space: nowrap + overflow: hidden 实现），对多行完全不起作用。
用 -webkit-line-clamp 实现真·三行省略
这是目前最轻量、兼容性足够（Android 4.4+、iOS 7+、Chrome/Safari/Edge）的方案，不需要 JS，纯 CSS：
- 必须设为块级元素并指定高度范围（如
height: 3.6em，3 行 × 1.2 行高） - 启用弹性显示：
display: -webkit-box - 限制行数：
-webkit-line-clamp: 3 - 隐藏溢出：
overflow: hidden - 禁止换行折叠：
-webkit-box-orient: vertical
示例代码：
.three-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.2;
height: 3.6em;
}
注意：不能和 text-center / text-end 等对齐类混用在同一个元素上——-webkit-box 会干扰文本基线对齐，如需居中，请在外层加 text-center 容器。
响应式控制：仅在移动端启用三行截断
桌面端可能希望完整显示，而手机才需要压缩。别用媒体查询去改 -webkit-line-clamp（它不支持 CSS 变量或条件切换），而是用断点控制是否应用该样式：
- 给元素加基础类
text-truncate-mobile，只在小屏生效 - 用
@media (max-width: 767.98px)包裹上述三行样式 - 避免写
!important——Bootstrap 5 的col类带flex-shrink: 0，可能压制你的height，必要时加flex-shrink: 1
关键兼容点：iOS Safari 对 -webkit-line-clamp 支持稳定，但若父容器用了 display: flex 且没设 flex-direction: column，可能失效；建议三行文字容器本身不要嵌套在 d-flex 里，或显式补 align-self: start。
替代方案：用 JS 动态截断（当 CSS 不够用时）
如果内容含富文本、换行符
el
