线包装上的CSS宽度/最大宽度？

Question

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

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

Answer 1

是的，这是正常行为。

浏览器将尝试将文本内嵌在框内，直到达到其允许的最大宽度250px，然后将任何不适合第一行的文本换行到下一行和后续行。 （如果没有足够的文本达到最大宽度，则width: auto会导致框缩小以适合该文本量。）

但是，在包装后，该框不会再缩小以适合文本，因为文本换行不会以这种方式工作。这意味着框的width计算为250px，而仅计算，因为您的CSS表明它最多只能为250px。它被计算为一些较小的值，等于 text 的宽度，然后被max-width覆盖，然后被{{1}}覆盖。

我认为你无法改变这种行为。

Answer 2

尝试使用以下方法之一：

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>            
        <local:CustomMap x:Name="customMap" MapType="Street" Grid.Row="0" />
    </Grid>
</ContentPage.Content>

它们不是100％兼容，但前缀或多或少地解决了这个问题。

来源：https://developer.mozilla.org/docs/Web/CSS/width