Question

伙计们，你可以帮我解释一下吗？我有以下代码，我不明白为什么h元素伸展到我设置的宽度并且li元素赢了。

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul li,h1{
      width:20px;
      display:inline-block;
    }
    </style>
    </head>

<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<ul>
<li>fffffffffffffffffffaaaaaaa</li>
</ul>

</body>
</html>

我附上了一张图片，我不会将内容放在黑色边框内，像块块一样向下延伸，但我不会发生。

Answer 1

使用word-warp：

ul li,h1{
  width:20px;
  display:inline-block;
  word-wrap: break-word;
}

Answer 2

如果您希望它环绕包含元素，则不应为宽度设置任何固定值。如果您希望宽度为某个值，请确保它小于包含的父级。

Answer 3

如果内容没有空格，那么它就不会在包装盒周围环绕。使用word-wrap: break-word;或word-break: break-word;包装内容。见DEMO -

ul li {

    word-wrap: break-word;
    word-break: break-word;

}

响应内容

3 个答案: