強制文本適合父元素

據我所知，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。

來源

2015-01-31 Haven Lovell

退房[這個答案]（http://stackoverflow.com/questions/12747045/css-shrink-a-parent-div-to-fit-如果我正確理解你的問題，第一個答案應該可以解決你的問題。 – MTCoster 2015-01-31 18:18:11

這正是我想要的。不過，我希望不必訴諸使用CSS表格。我想這是唯一的解決方案，除了，我猜，'max-content'。 – 2015-01-31 18:21:00

從技術上講，它不是一張表，只是在表格中常用的一組規則（實際上是默認情況下），在這種情況下恰好發生了這種情況。 – MTCoster 2015-01-31 18:22:34

@MTCoster，你的鏈接給了我一個主意。

如果你擺弄的寬度，你可以設置其寬度動態相同的父。

就像在鏈接中一樣，width: 1px將表壓縮爲最小單個詞的大小。然後min-width: 100%將其展開爲父項的寬度。只有2行！

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

添加word-wrap: break-word;，甚至更好，因爲這將防止擴大DIV超越其父一個很長的單詞。

Updated Fiddle。

非常感謝！

來源

2015-01-31 18:43:19

如果你圍繞長文本和短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/

來源

2015-01-31 18:50:27 chris

強制文本適合父元素

回答

相關問題