Início / coding / Perguntas / 79553817
Accepted
DZN
Asked: 2025-04-04 03:23:01 +0800 CST

CSS: Como informar ao usuário que nem todo conteúdo cabe em um flex container

  • 772

Existe alguma maneira de informar ao usuário que nem todo conteúdo cabe em um contêiner flexível?

Quaisquer ícones, sinais, textos etc., text-overflow: ellipsis;que podem ser definidos para texto simples.

.list-panel {
  display: flex;
  overflow-x: clip;
  width: 300px; /* <<----- */
  gap: 8px;
  padding: 10px;
  background: skyblue;
}

.item {
  background: lightcyan;
}
<div class="list-panel">
  <span class="item">111111111111</span>
  <span class="item">222222222222</span>
  <span class="item">333333333333</span>
  <span class="item">444444444444</span>
  <span class="item">555555555555</span>
  <span class="item">666666666666</span>
</div>

html

1 respostas

  1. Best Answer

    Uma ideia inteligente para usar com cautela (ou não usar de jeito nenhum):

    .list-panel {
  display: flex;
  overflow: hidden;
  width: 300px;
  gap: 8px;
  border: 10px solid #0000;
  background: skyblue;
  margin: 10px;
}

.item {
  background: lightcyan;
}

.list-panel:after {
  content:" ... ";
  background: red;
  padding-inline: 5px; 
  position: sticky;
  right: 0;
}
/* the last item will have a big overflow coloration 
   that will hide the pseudo element but the pseudo element
   will be visible if we have a lot of items because
   the last item is no more visible
*/
.item:last-child {
  z-index: 1;
  border-image: 
    conic-gradient(skyblue 0 0) 
    0 1 0 0/0 100vw 0 0/0 100vw 0 0;
}
    <div class="list-panel">
  <span class="item">111111111111</span>
  <span class="item">666666666666</span>
</div>

<div class="list-panel">
  <span class="item">111111111111</span>
  <span class="item">666666666666</span>
  <span class="item">666666666666</span>
</div>

<div class="list-panel">
  <span class="item">111111111111</span>
  <span class="item">222222222222</span>
  <span class="item">333333333333</span>
  <span class="item">444444444444</span>
  <span class="item">555555555555</span>
  <span class="item">666666666666</span>
</div>

    • 1

relate perguntas