强制文本适合父元素答案

【问题标题】：Force text to fit into parent element强制文本适合父元素
【发布时间】：2026-01-29 15:10:01
【问题描述】：

我了解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，但它会将文本从块级中取出（将所有内容向上推）。

Fiddle.

【问题讨论】：

查看this answer，如果我正确理解您的问题，第一个答案应该可以解决您的问题。
这正是我想要的。然而，我希望我不必求助于使用 CSS 表格。我想这是唯一的解决方案，除了max-content。
从技术上讲，它不是一个表格，只是表格中常用的一组规则（实际上是默认情况下），恰好在这种情况下起到了作用。

标签： html css

【解决方案1】：

如果你将 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】：

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

如果你摆弄宽度，你可以将它的宽度动态设置为与父级相同。

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

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

添加word-wrap: break-word; 会更好，因为这样可以防止非常长的单词将 div 扩展到其父级之外。

Updated Fiddle.

非常感谢！

【讨论】：