Question

我知道display: inline-block会导致父元素'＆＃34;缩小＆＃34;到最大子元素的宽度。如果最大元素是像<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，但它会将文本从块级别中推出（推动所有内容）。

Fiddle

Answer 1

@MTCoster，你的链接给了我一个想法。

如果您调整宽度，可以将其宽度动态设置为与父级相同。

就像在链接中一样，width: 1px将表格压缩为最小单个单词的大小。然后min-width: 100%将其展开为父级的宽度。只有2行！

.longtext {
    width: 1px;
    min-width: 100%;
}

添加word-wrap: break-word;甚至更好，因为这会阻止一个非常长的单词将div扩展到其父级之外。

Updated Fiddle

非常感谢！

Answer 2

如果你将div包含在longtext和short 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/

强制文本适合父元素

2 个答案: