bootstrap 5 的 text-truncate 类不能单独使表单内文本省略，必须同时满足块级显示（如 d-block）、明确宽度约束（如 mw-100 或 max-width）和合适布局上下文（如 min-width: 0 防 flex 撑宽），否则 text-overflow: ellipsis 不触发。
表单内文本过长显示省略号，在 Bootstrap 5 中不能只靠 text-truncate 类——它默认不生效，除非你补全宽度约束、块级显示和布局上下文这三样东西。
为什么 text-truncate 加在 form-control 上没反应
因为 form-control 默认是 display: block，但它的父容器（比如 .col 或 .form-group）往往没设 max-width，导致内部文本能自由撑宽；text-overflow: ellipsis 只有在「内容宽度 > 容器可用宽度」时才触发，否则纯属静默失效。
- 常见现象：输入框里文字很长，但没省略号，反而横向滚动或溢出边框
- 根本原因：缺少
max-width+overflow: hidden的实际作用域（form-control自身 overflow 是 visible） - 别试图给
input或textarea直接加text-truncate——input不支持text-overflow，textarea不支持white-space: nowrap - 真正可截断的，是
label、help-text、invalid-feedback这类静态文本容器
如何让表单 label 或 help-text 支持响应式省略号
必须手动组合 CSS，不能只依赖工具类。Bootstrap 5 的 text-truncate 是个“半成品”，只封装了视觉部分，不解决布局前提。
- 给
label加class="d-block text-truncate"后，再补一个max-width: 100%（用mw-100或内联style="max-width: 100%"） - 若 label 在
col内，优先用class="col-auto text-truncate d-block mw-100"——col-auto防止被 flex 撑开，mw-100确保不超父宽 - 对于
.form-text或.invalid-feedback，加text-truncate前先确认它已包裹在固定宽容器中（如<div class="w-100"> <p class="form-text text-truncate">）</p> <li>移动端小屏下，建议配合媒体查询降级为单行：<code>@media (max-width: 576px) { .form-label-truncate { -webkit-line-clamp: 1; } }，避免两行标题挤占垂直空间 - 正确做法：在
cellStyle中返回css对象，显式写'max-width': '200px'、'white-space': 'nowrap'、'overflow': 'hidden'、'text-overflow': 'ellipsis' - 不要用
width，改用max-width，否则在窄屏下会硬卡住，破坏响应式 - 如果字段含 HTML 或特殊字符，
formatter必须返回span.outerHTML，且span.title = value做悬停提示，不能只靠title属性——title在空格/换行/中文标点处极易截断 - 性能敏感时，别在
onLoadSuccess里遍历所有td补title，改用事件委托绑定到tbody上监听mouseenter - 必须写的四条 CSS：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden - 必须设
max-height（如calc(1.4em * 2 + 0.2em)），不能设height，否则第二行可能被裁掉上半截 - Firefox 兼容方案只能 JS 回退：用
scrollHeight > clientHeight判断是否溢出，再手动截断 + 拼接「…」 - 别在
form-control内部用这个——input和textarea不支持display: -webkit-box，强行加会导致样式崩坏或失去焦点能力
表格型表单（如 bootstrap-table）中字段值截断怎么配
这是最常踩坑的场景：直接在 column 的 cellStyle 里写 text-truncate 没用，因为渲染后实际 DOM 是 <td><div class="td-inner">...</div></td>，而 text-truncate 被套在了子元素上，宽度控制却落在父级 td 上。
多行截断（如卡片内描述字段）要不要用 -webkit-line-clamp
要，但得接受它不是万能解法：Firefox 仅从 v73+ 开始支持，旧 WebView 和部分 Electron 版本仍 fallback 失败；而且它和 text-truncate 互斥——一旦用了 -webkit-line-clamp，就不能再叠加 text-truncate 类，否则 white-space: nowrap 会覆盖 -webkit-box-orient: vertical。
最易忽略的一点：所有截断逻辑都依赖「容器宽度可计算」。如果你的表单嵌在 flex 容器里，又没给子项设 min-width: 0，那哪怕写了 max-width: 100%，浏览器也会拒绝压缩文本，text-overflow 彻底失效——这时候得加 style="min-width: 0" 到父级 div 上，而不是死磕 CSS 类。
