html - 强制文本适合父元素

Question

我明白 display: inline-block将导致父元素“收缩”到最大子元素的宽度。如果最大的元素是 <img /> 这样的元素，这正是我想要的.

但是，如果一行文本恰好很长，它会扩展父级的宽度。

<div class="hi">
    <img src="http://placehold.it/350x150" />
    <div class="longtext">
        Eu duis eram anim senserit. Quae deserunt voluptatibus ex noster nam eu sunt laboris ea consequat ut amet litteris, ingeniis hic sint, et elit voluptatibus te legam do possumus, fugiat sempiternum tempor irure laboris, possumus tamen sunt expetendis quid.
    </div>
    <div class="short">wow</div>
</div>

Fiddle这样你就可以看到问题了。

如何强制一行很长的文本采用父元素的宽度，而父元素又采用子元素的宽度？

我能得到的最接近我想要的是position: absolute但它会将文本带出 block 级别(将所有内容向上推)。

Fiddle .

Answer 1

如果你将 div 包裹在长文本和短 div 的周围，你可能会得到你想要的吗？

HTML:

<div class="hi">
    <img src="http://placehold.it/350x150" />
    <div class="longtext">
        <div>
            Eu duis eram anim senserit. Quae deserunt voluptatibus ex noster nam eu sunt laboris ea consequat ut amet litteris, ingeniis hic sint, et elit voluptatibus te legam do possumus, fugiat sempiternum tempor irure laboris, possumus tamen sunt expetendis quid.
        </div>
        <div class="short">wow</div>
    </div>
</div>

http://jsfiddle.net/5mof1pku/