主页 / coding / 问题 / 79256312
Accepted
Cheetah
Asked: 2024-12-06 05:41:41 +0800 CST

将一个子项的 min-width 设置为 min-content，但将另一个子项缩小

  • 772

我正在尝试复制您在 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没有表现，文本没有被剪切，文本和关闭按钮之间也没有间隙。

html

2 个回答

  1. Best Answer

    像下面这样更新您的代码

    #parent {
  background: grey;
  color: #fff;
  display: flex;
  gap: 5px;
  height: 50px;
}

.item {
  align-items: center;
  display: flex;
  background: blue;
  width: 40px;
  min-width: min-content;
}

span {
  width: 0; /* disable width contribution */
  flex: 1; /* take any remaining space */
  clip-path: inset(0 5px 0 0); /* simulate the gap and hide the overflow */
  white-space: nowrap;
}

button {
  width: 20px;
  aspect-ratio: 1;
}
    <div id="parent">
  <div class="item">
    <span>Text example</span>
    <button></button>
  </div>
  <div class="item" style="width: 0px">
    <span>you don't see me</span>
    <button></button>
  </div>
  <div class="item" style="width: 90px">
    <span>another Text</span>
    <button></button>
  </div>
  <div class="item" style="width: 150px">
    <span>another Text</span>
    <button></button>
  </div>
</div>

    • 2

  2. 首先，我正在调整您的代码并注意到您有几个无效值？

    例如，nowrap对于属性 似乎无效word-break。相反，您可以使用white-space: nowrap;。您要实现的功能应该相同。

    接下来，回答您的主要问题，Chrome 的标签似乎实际上并没有“间隙”，而是淡出/隐藏效果。要加入这样的效果，您可以使用 CSS mask-image（请注意，这可能不适用于较旧的浏览器版本）。

    -webkit-mask-image: linear-gradient(to right, gray 1%, transparent 100%);
mask-image: linear-gradient(to right, gray -50%, transparent 100%);

    这是一个有效的片段（我做了一些调整以便看得更清楚）：

    #parent {
  background: grey;
  display: flex;
  height: 50px;
}

#item {
  align-items: center;
  display: flex;
  background: red;
  min-width: auto;
  width: 100px;
}

span {
  margin-left: 5px;
  display: inline;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, gray 1%, transparent 100%);
  mask-image: linear-gradient(to right, gray -50%, transparent 100%);
  padding-right: 5px;
}

button {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
    <div id="parent">
  <div id="item">
    <span>Random Text Here</span>
    <button></button>
  </div>
</div>

    • 1

相关问题