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没有最大宽度：100％。可以说，这是它们的固有宽度。但是li的宽度确实不能超过其父ul。

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

我尝试摆弄显示，宽度，列宽，但无济于事。没有应用时髦的textwrapping CSS。

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

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

A：Harm Smits发布了 fix ，但我的问题是：为什么：）

Answer 1

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

word-wrap: break-word;

列列表中的textnode不尊重父级宽度

1 个答案: