如何在div内容为纯数字时设置自动高度？

连续纯数字属于无空白分隔的长字符串，浏览器默认不会对这类内容自动换行——哪怕你设置了flex-wrap: wrap也没用，因为flex容器里的文本是作为单个匿名flex项存在的，这个长数字串本身不会被拆分。

解决方法很简单，给容器添加word-break: break-all;属性，强制浏览器在容器边界处断行，数字就会自动适配宽度换行，容器高度也会随内容自动调整。

修改后的CSS代码：

#canvas{
    width: 500px;
    height: auto;
    overflow: hidden;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    background-color: grey;
    border: 3px solid rgb(90, 90, 90);
    color: white;
    /* 强制长字符串断行 */
    word-break: break-all;
}

你也可以用overflow-wrap: break-word;替代，不过word-break: break-all对纯数字场景更直接，它会在任意位置截断换行；而overflow-wrap会优先尝试在单词边界换行（纯数字没有单词边界，最终效果差不多）。

另外，其实这个场景下flex布局不是必须的，仅靠width+text-align+word-break就能实现需求，保留flex也不会影响效果。

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