如果指定了文本溢出，浏览器如何计算弹性框的宽度-Java 学习之路

所有：

如果我设置了flexbox文本溢出：省略号;并将其flex指定为1 1 auto;当我收缩那个flexbox时，浏览器如何计算auto的值？

<style>
    .flexcontainer {
        display:flex;
        flex-flow: row nowrap;
        width:100%;
        height:auto;
    }
    .test {
        flex: 1 1 auto;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space: nowrap;
    }
</style>

<div class="flexcontainer">
    <div class="test">This is a flexbox to thrink</div>
    <div class="test">This is another flexbox to thrink</div>
</div>

它是否仍然是没有裁剪的文本的全长？就像浏览器首先获得文本的总长度而没有在这两个.test div中裁剪并使用.flexcontainer的宽度减去总数来获得收缩宽度？

与此相关的另一个问题是：

[1]浏览器如何决定Flexbox是在徘徊还是在增长？

[2]如果我给flex非常大的数字作为flex：1 1 10000000px，浏览器如何计算thrink？

谢谢

1 回答

1

Flex-basis Reference

一个flex-basis值设置为根据元素的size属性自动调整元素的大小（它本身可以是关键字auto，它根据元素的内容调整元素的大小） .

因此，通过上面的定义，当容器宽度小于内容宽度时，浏览器使用 text-overflow: ellipsis .

回复于 2024-04-30T03:24:35+08:00

如果指定了文本溢出，浏览器如何计算弹性框的宽度

1 回答

相关问题