行宽度/最大宽度行包装？

问题描述

#tooltip
{
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
}

基于这种风格，我希望我的工具提示缩小或增长，内容，低至50像素或高达250像素。但是，当内容包装到下一行时，max-width属性似乎超出了我的width属性。这是一个美学的东西，当一个句子的结尾处的词长，它看起来像留下一堆padding（见截图）。这是正常的行为吗？

Based on this style I would expect my tooltip to shrink or grow to fit the content, down to 50px or up to 250px. However, the max-width property seems to be over-riding my width property when a content wraps to the next line. It is an aesthetics thing when the word at the end of a sentence is long, it looks like it leaves a bunch of padding (see screenshot). Is that the normal behavior?

推荐答案

是的，这是正常的行为。

Yes, that's the normal behavior.

将尝试在文本框内直接流动文本，直到达到其允许的最大宽度250px，然后将第一行上无法显示的任何文本换行到下一行和后续行。 （如果没有足够的文字达到最大宽度，则 width：auto 会导致框缩小到适合该文本的数量。）

A browser will try to flow your text inline within the box until it reaches its maximum allowed width of 250px, then wrap to the next and subsequent lines any text that cannot fit on the first line. (If there is not enough text to reach the maximum width, then width: auto causes the box to shrink to fit just that amount of text.)

然而，框包装之后不会再收缩以适应文本，因为文本换行不会那样工作。这意味着框的 width 计算为250像素，而仅，因为你的CSS声明它最多只能是250像素。它不会计算为一些较小的值，等于文本之后的宽度，然后覆盖 max-width 。

However, the box will not shrink again to fit the text after wrapping it, because text wrapping just doesn't work that way. This means the box's width is computed as 250px, and only because your CSS states that it can only be 250px at most. It's not computed to some smaller value equal to the width of the text after wrapping then overridden by max-width.

我不认为你可以做任何事情来改变这种行为。

I don't think there is anything you can do to change this behavior.

这篇关于行宽度/最大宽度行包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！