css 中的宽度有些混乱

Question

<p style="width: 20%; border: 1px solid black">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd1</p>

在上面的代码中，ddd.. 超过了边界，即使我给它设置了 20% 的宽度。它不应该停在其内容区域的 20% 宽度处吗？您能解释一下 width: 20% 在此代码中的实际含义吗？

Answer 1

使用自动换行。

p {
word-wrap: break-word;
}

<p style="width: 20%; border: 1px solid black">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd1</p>

Answer 2

可以通过添加

来限制内容溢出

p{
overflow: hidden;
}

或

p{
word-wrap: break-word;
}

如果帮助已满，请投票

Answer 3

回答我自己的问题。

This 是一篇很棒的文章，它帮助我理解了很多关于溢出属性的事情。不管怎样，虽然我自己也不清楚，但我脑子里有以下困惑：

问。如果 div 的宽度被设置为 20%，里面的内容不应该尊重它并保持在那个宽度内，而不是超过宽度吗？

一个。没有。通过设置宽度和高度，我们只是为文档的正常流中的 div 保留 space。换句话说，宽度和高度是 width.However 内容区域的尺寸，实际内容是否遵守指定 width/height 将由 overflow 属性决定。默认情况下，我们在所有元素上设置了 overflow: visible。这意味着该内容将越过边界并在 boundery.The 之外可见13=]

css 中的宽度有些混乱

Some confusion with width in css

css

width