如何实现wdr-level-*单元格文本换行并设置最大宽度？已试text-wrap无效

直接自定义CSS覆盖样式 #

Bootstrap的text-wrap失效大概率是因为目标单元格有更高优先级的默认样式（比如white-space: nowrap），或者表格布局限制了宽度。直接针对wdr-level-*类写自定义CSS，强制生效：

/* 匹配所有wdr-level-前缀的类 */
[class^="wdr-level-"] {
  max-width: 250px; /* 根据需求调整最大宽度 */
  white-space: pre-wrap; /* 保留文本原有换行，同时自动换行 */
  overflow-wrap: break-word; /* 超长单词强制拆分换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
}

处理表格布局限制 #

如果这些单元格在表格内，还需要给父表格添加固定布局，确保单元格宽度能被max-width控制：

table {
  table-layout: fixed;
  width: 100%;
}

排查样式冲突 #

用浏览器开发者工具（F12）选中目标单元格，查看Styles面板：

• 检查white-space属性是否被设为nowrap，如果是，说明有其他规则覆盖了text-wrap的white-space: normal
• 确认display属性为table-cell或block，inline元素无法正常应用换行和宽度规则

内容的提问来源于stack exchange，提问作者Zoltan Sutto