CSS 中的宽度有些混淆

Question

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

在上面的代码中，ddd.. 会超过边框，即使我给它一个 20% 的宽度。它不应该停在其内容区域的 20% 宽度吗？你能解释一下宽度：20% 在这个代码中到底是什么意思吗？

Answer 1

使用自动换行。

p {
word-wrap: break-word;
}

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

Answer 2

回答我自己的问题。

这是一篇了不起的文章，它帮助我了解了很多关于溢出财产的事情。不管怎么说，虽然我自己也不清楚，但我心里有以下困惑：

问。如果div 的宽度已设置为 20%，则内部的内容是否应该尊重该宽度并保持在该宽度内，而不是超过宽度？

答：没有。通过设置宽度和高度，我们只是在文档的正常流程中为div 保留空间。换句话说，宽度和高度是宽度的内容区域的尺寸。但是，实际内容是否遵循指定的宽度/高度将由overflow属性决定。默认情况下，我们在所有元素上都设置了overflow: visible。这意味着该内容将超出边界并在边界外可见。这里要记住的重要一点是，即使内容在框外可见，该内容也不会影响页面的流动。

Answer 3

您可以通过添加来限制内容溢出

p{
overflow: hidden;
}

或

p{
word-wrap: break-word;
}

如果帮助满，请投票