文本未包含在绝对定位的 div 内答案

【问题标题】：Text is not wrapping inside absolute positioned div文本未包含在绝对定位的 div 内
【发布时间】：2012-05-20 18:59:32
【问题描述】：

我在将文本包裹在绝对定位的 div 中时遇到问题。我认为问题是我必须将宽度设置为 100%，因为 div 会随页面调整大小。如何让文本换行。

这是我的代码：

#content {
  background: black;
  min-height: 60px;
  background: #0a0a0a;
  position: relative;
  padding: 0;
  overflow: hidden;
}

#content .entry {
  background: white;
  position: absolute;
  text-wrap: normal;
  top: 0;
  left: 200px;
  padding: 10px;
  width: 100%;
  height: 100%;
  min-height: 50px;
  border-left: 1px solid #262626;
}

<div id="content">
  <div class="entry">
    <-----text---->
  </div>
</div>

【问题讨论】：

在 100% 宽度的 div 内放置一个没有设置特定宽度的 div。这会给 div 一个“预设”宽度，而不是 100% 的宽度，但它仍然是相同的宽度。
这似乎没有任何改变。问题是 div 比它的父 div 扩展了 200px，因为我将它定位在距离父 div 左侧 200px 处。
请提供html，方便调试
我给了我们添加 220px 的 padding-right 的 div 来弥补它的效果。不漂亮，但它有效。如果你愿意，可以作为答案。
我觉得html里的id="entry"应该是class="entry"吧？

标签： html css text word-wrap

【解决方案1】：

问题是您在 .entry 元素上声明了 100% 的宽度和 400 像素的左侧。总宽度将为 100% + 400px，这将使 .entry 元素比其容器更宽。它确实包装了它的文本，但你不会看到它最右边的 400 像素。

问题是您不能在同一个元素上定义宽度和填充/边距/左/右/等。您需要一个嵌套结构来完成它。因此，在 content > entry html 结构中添加一个额外的 div，并在第一个上定义宽度，在第二个上定义填充。

【讨论】：

问题是.entry 不会扩展父级的宽度，除非有足够的文本达到父级的结束宽度。你可以在这里看到。 jsfiddle.net/gp8p4/2
啊，我明白了。您可以在条目和内容之间添加一个额外的“
”吗？
然后给 .entry padding-right 以弥补它扩展的数量。是的。
是的，问题是你不能在同一个元素上定义宽度和填充/边距/左/右/等。你需要一个嵌套结构来完成它。
是的，这就是我们在上面的 cmets 中所做的工作。更改您的答案以反映这一点，我会接受。