Início / coding / Perguntas / 79256312
Accepted
Cheetah
Asked: 2024-12-06 05:41:41 +0800 CST

min-width para min-content de uma criança, mas reduza a outra

  • 772

Estou tentando replicar o comportamento que você tem em uma aba do Chrome no Windows.

A largura mínima da aba é definida como a largura do botão Fechar e cortará qualquer texto conforme a aba encolhe, garantindo que sempre haja um espaço entre qualquer texto visível e o botão Fechar.

Foi aqui que cheguei:

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>

Isso não chega nem perto. O min-width: min-contentnão se comporta, o texto não é recortado e não há espaço entre o texto e o botão de fechar.

html

2 respostas

  1. Best Answer

    Atualize seu código como abaixo

    #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. Primeiramente, eu estava ajustando seu código e percebi que você tem alguns valores inválidos?

    Por exemplo, nowrapparece ser inválido para a propriedade word-break. Em vez disso, você pode usar white-space: nowrap;. A funcionalidade que você está buscando deve ser a mesma.

    Em seguida, abordando sua pergunta principal, as abas do Chrome parecem não ter realmente uma "lacuna", por si só, mas sim um efeito de fade-out/ocultação. Para incorporar algo assim, você pode usar um CSS mask-image(Observe que isso pode não funcionar em versões mais antigas do navegador).

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

    Aqui está um trecho funcional (eu ajustei algumas coisas para poder ver melhor):

    #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

relate perguntas