智能地減少由於最大寬度導致的子文本換行時父元素的寬度

Question

我在<div>中呈現一些文本。 <div>的width受其父母的max-width值的限制。由於這個約束，文本包裝。

給定一定的句子長度的元素的佈局可能看起來非常不平衡和貧窮。發生這種情況的原因是max-width值被視爲width，因爲文本環繞，較小的width值就足夠了。

是否可以向瀏覽器解釋這一點？可能使用max-width: min-content/max-width: max-content？

我不相信這是可能的，但我想放棄之前確認。

作爲參考，這裏是兩個包含文本的框。第一個包裝文本的方式是在右側有大量的可用空間。第二個盒子沒有這個問題，因爲它不包裝。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
.tooltip { 
 
    position: absolute; 
 
    max-width: 280px; 
 
    padding: 5px 8px; 
 
    font-size: 13px; 
 
    line-height: 16px; 
 
    color: white; 
 
    pointer-events: none; 
 
    background-color: rgba(50, 50, 50, 0.9); 
 
    border-radius: 2px; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 2px 2px 4px rgba(0, 0, 0, 0.28); 
 
} 
 
.tooltip-content { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class='tooltip'> 
 
    <span class='tooltip-content'> 
 
    Hello, world. This is a tooltip! It's fancy and word-wraps 
 
    </div> 
 
</div> 
 

 
</br> 
 
</br> 
 
</br> 
 

 
<div class='tooltip'> 
 
    <span class='tooltip-content'> 
 
    Hello, world. This is a tooltip! It's fancy, no? 
 
    </div> 
 
</div>

Answer 1

已經有很多討論關於在過去的幾年裏這個特殊的怪癖。 This post很好地總結了解決問題和傳統方法。他們提出的解決方案已由Adobe以jQuery plugin的形式實施，可能適合您的需求。希望這將成爲未來CSS規範的一部分！