IE11中word-break: break-word无法实现文本换行的问题求助

嘿，IE11的兼容性坑确实让人头大，针对你遇到的文本换行问题，我给你几个经过验证的解决方案：

方案1：替换为IE11支持的换行属性组合 #

IE11并不支持word-break: break-word，但它支持旧版的word-wrap: break-word（对应标准属性overflow-wrap: break-word），同时搭配word-break: break-all可以强制长单词在任意位置换行。修改你的CSS类如下：

.my-class {
  width: 170px;
  padding-bottom: 100px;
  padding-top: 100px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  text-align: end;
  /* 新增IE11兼容换行属性 */
  word-wrap: break-word; /* IE11支持的旧版属性 */
  overflow-wrap: break-word; /* 现代浏览器标准属性 */
  word-break: break-all; /* 强制长单词换行，适配IE11 */
}

方案2：给文本子元素强制设置宽度约束 #

有时候Flex容器的对齐属性可能会让文本忽略容器宽度，导致换行失效。如果你的文本是放在.my-class的子元素里，给子元素加上宽度约束：

.my-class > * {
  max-width: 100%; /* 强制子元素不超出容器宽度 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

方案3：使用IE专属前缀属性 #

如果上面的方案都不生效，可以试试IE特有的-ms-word-break属性，直接强制文本换行：

.my-class {
  /* 其他原有样式 */
  -ms-word-break: break-all;
  word-wrap: break-word;
}

另外要注意：检查是否有其他CSS属性（比如white-space: nowrap）覆盖了你的换行设置，确保文本元素没有被设置为不换行。

内容的提问来源于stack exchange，提问作者Leo Messi