Html css父绝对位置div，带有一个子div，该子div基于文本换行或父容器的宽度换行内容

示例JSFIDLE：

给定如下模板：

<div class="outer">
  <div class="inner">
    hello world testing hello world
  </div>
</div>

hello world测试hello world

如果外部为

位置：绝对

，如何使子容器具有基于其内容的宽度

因此，我们可以说：

编辑：

---

只是补充一下，内部div的内容是未知的，并且是动态变化的。所以我不能使用固定宽度或宽度百分比。内部div也可能溢出外部div，我认为这在CSS中是不可能的。请参见，您的

.internal

元素是

div

，默认情况下它是

块

元素。这意味着默认情况下，它的宽度为父对象的100%。例如，您可以将

.internal

的显示更改为

内联块

，使其不具有100%默认宽度，但问题是内部有文本。一旦该文本填充至少一行（父级的一个全宽），并且需要换行-从那时起，该文本自动被视为需要父级的全宽。即使文本在视觉上看起来使用较少的宽度（它没有，它实际上使用wull宽度-它只是换行）。如果你看一段较短的文字，你就会明白这一点。我在这里提供了一个

内联块的示例：


.outer{
最大宽度：100px；
最大高度：300px；
最小高度：100px；
背景颜色：黄色；
}
.内部{
背景颜色：绿色；
显示：内联块；
边缘底部：10px；
}

hello world测试hello world
你好
你好，世界
我认为这在CSS中是不可能的。请参见，您的
.internal
元素是
div
，默认情况下它是
块
元素。这意味着默认情况下，它的宽度为父对象的100%。例如，您可以将
.internal
的显示更改为
内联块
，使其不具有100%默认宽度，但问题是内部有文本。一旦该文本填充至少一行（父级的一个全宽），并且需要换行-从那时起，该文本自动被视为需要父级的全宽。即使文本在视觉上看起来使用较少的宽度（它没有，它实际上使用wull宽度-它只是换行）。如果你看一段较短的文字，你就会明白这一点。我在这里提供了一个
内联块的示例：


.outer{
最大宽度：100px；
最大高度：300px；
最小高度：100px；
背景颜色：黄色；
}
.内部{
背景颜色：绿色；
显示：内联块；
边缘底部：10px；
}

hello world测试hello world
你好
你好，世界
谢谢你的解释，我明白你的意思了。所以我猜在这一点上，我要做的是用javascriptyes找出换行符，这在javascript中是可能的，但是，我会首先尝试重新思考您的用例，并尝试找到一种不同的方式来实现您想要的。也许你可以避免使用javascript，仍然以一种有意义的方式显示你的信息。此外，如果这些文本的长度更大，你可以想象迟早会出现一行文本，甚至在视觉上看起来是全宽的。这意味着你的问题将不再存在。谢谢你的解释，我明白你的意思了。所以我猜在这一点上，我要做的是用javascriptyes找出换行符，这在javascript中是可能的，但是，我会首先尝试重新思考您的用例，并尝试找到一种不同的方式来实现您想要的。也许你可以避免使用javascript，仍然以一种有意义的方式显示你的信息。此外，如果这些文本的长度更大，你可以想象迟早会出现一行文本，甚至在视觉上看起来是全宽的。这意味着你的问题将不再存在。