Dojo列表文本框内容过多横向滚动，如何限制在表格单元格内？

我之前也碰到过这个坑——Dojo的List Text Box组件默认样式会让内容一直横向延伸，哪怕超出表格单元格边界也不换行，非得拉滚动条才能看全。下面是几个亲测有效的解决办法：

方法1：直接给组件加内联样式 #

最快捷的方式就是在你的xe:djextListTextBox标签里直接插入强制换行的CSS，覆盖它的默认不换行设置：

<xp:td style="width:80%; max-width:80%;">
  <xe:djextListTextBox 
    id="djPersonSerialLetter"
    style="width:100%; white-space:normal; word-wrap:break-word;"
    <!-- 保留你原有的其他属性 -->
  >
  </xe:djextListTextBox>
</xp:td>

这里的核心样式作用：

• width:100%：让文本框完全填满表格单元格的宽度
• white-space:normal：取消组件默认的“不换行”规则，允许内容自动折行
• word-wrap:break-word：遇到长单词或者无空格的连续字符时，强制拆分换行

方法2：用CSS类统一管控 #

如果页面里有多个这类组件，建议用CSS类统一管理，避免重复写样式：
先在页面的<head>区域添加样式块：

<style>
  .wrap-list-textbox {
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
</style>

然后给你的List Text Box组件绑定这个类：

<xp:td style="width:80%; max-width:80%;">
  <xe:djextListTextBox 
    id="djPersonSerialLetter"
    styleClass="wrap-list-textbox"
    <!-- 保留你原有的其他属性 -->
  >
  </xe:djextListTextBox>
</xp:td>

加!important是为了确保我们的样式能覆盖Dojo组件自带的默认样式优先级。

额外注意点 #

• 要确保表格单元格的宽度设置真的生效，别让单元格被内容撑开。如果width:80%没效果，可以试试固定像素值（比如width:600px），或者给父表格加table-layout:fixed属性。
• 部分版本的Dojo List Text Box内部会嵌套一个<div>容器，如果上面的样式不生效，可以针对内部容器再补个样式：

.wrap-list-textbox .dijitInputContainer {
  white-space:normal;
  word-wrap:break-word;
}

内容的提问来源于stack exchange，提问作者M. Schaetzl