我正在尝试复制您在 Windows 上的 Chrome 标签的行为。
选项卡的最小宽度设置为关闭按钮的宽度,并且它会在选项卡缩小时剪裁任何文本,确保任何可见文本和关闭按钮之间始终存在间隙。
以下是我所得到的结果:
https://jsfiddle.net/f7tc34q6/9/
#parent {
background: grey;
display: flex;
height: 50px;
}
#item {
align-items: center;
display: flex;
background: blue;
min-width: fit-contents;
width: 40px;
}
span {
display: inline;
min-width: 0;
overflow: hidden;
word-break: nowrap;
padding-right: 5px;
}
button {
display: block;
width: 20px;
height: 20px;
}
<div id="parent">
<div id="item">
<span>Text</span>
<button></button>
</div>
</div>
这根本就不接近。它min-width: min-content
没有表现,文本没有被剪切,文本和关闭按钮之间也没有间隙。