智能地减少由于最大宽度导致的子文本换行时父元素的宽度

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规范的一部分！