列中列表中的文本节点不尊重父宽度

Question

HTML 正文，分为 3 列，列表项的文本节点比其父元素长。

HTML 是这样的：

<div class='wrap'>
    <div class='column'>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      [...]
      <ul>
        <li>I'm a horribly long text node</li>
      </ul>
      <p>text</p>
    </div>
</div>

div.column 的样式如下：

-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%; <-- this does it
position: relative;
width: 100%;
min-height: 1px;
columns: 3;

div.wrap:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;

li 中的文本节点的宽度“好像”div.column 没有 max-width: 100%。可以这么说，这是它们固有的宽度。然而，li 的宽度确实不超过其父 ul。

结果如下所示：https://i.stack.imgur.com/SVL9N.png

我试过摆弄显示、宽度、列宽，但无济于事。 没有应用时髦的文本环绕 CSS。

这是关键：当我取出 textnode，然后重新应用它时，节点会按预期呈现。

问：为什么文本节点超过了父li的宽度？

答：Harm Smits 发布了修复，但我的问题是：为什么 :)

Answer 1

尝试为您的列设置以下 CSS 属性：

word-wrap: break-word;