CSS word-wrap属性失效无法包裹div内文本，搭配JS使用时文本溢出边框

问题根因 #

• 你插入的是没有空格分隔的连续长数字字符串，浏览器默认不会对这类无空白分隔的文本自动断行
• 父容器.example-1使用了flex布局，作为flex子项的.text容器没有设置宽度限制和断行规则，会被长文本直接撑开，超出父容器设置的425px宽度

修复方法 #

在你的CSS代码中新增针对.text类的样式规则即可，完整修改后的CSS代码如下：

.example-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  background: white;
  border-style: solid;
  border-radius: 5px;
  padding: 3px 3px 3px 3px;
  width: 425px;
}

/* 新增以下样式规则 */
.text {
  flex: 1;
  word-break: break-all;
  word-wrap: break-word;
}

规则说明 #

• flex: 1：让.text容器占满父flex容器的全部可用宽度，限制其最大宽度不会超过父容器的425px
• word-break: break-all：允许在任意字符位置断行，适配无空格的长数字、长字母字符串的换行需求
• word-wrap: break-word：兼容旧版本浏览器的断行属性，保证不同浏览器下效果一致

修改后动态插入的长文本就会自动在容器内换行，不会超出边框。

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