1

Tenho a seguinte estrutura HTML:

<div class="cloud_current_folder">
     <div data-folder-name>My Cloud</div>
     <div data-spliter></div>
     <div data-folder-name>Documents</div>
</div>

E o seguinte CSS:

.cloud_current_folder{
    width:200px;
    height:20px;

    float:left;
    position:relative;
    top:30px;

    background-color:#F00;
}
.cloud_current_folder div[data-folder-name]{
    width:auto;
    float:left;

    line-height:20px;
    font-size:16px; 
    font-weight:550;
    color: rgba(19, 19, 19, 0.6);

    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

O tamanho de cloud_current_folder será dinâmico, ou seja 100%, porém para efeitos de testes eu coloquei 200px, quando o tamanho das divs contendo o nome da pasta atual são maiores do que tal valor, tais divs são colocadas em novas linhas:

inserir a descrição da imagem aqui

E eu gostaria fazer com que, o tamanho atual das divs data-folder-name sejam reajustados e o texto dentro dessas seja cortado, um efeito tipo este: inserir a descrição da imagem aqui

Em modo que não importa quantas outras divs sejam adicionadas, as atuais se redimensionam abrindo espaço para uma nova. Como poderia ser feito?

1 Resposta 1

2

Leo com flex acho que vc consegue algo bem próximo do que vc quer. Com ele as divs ficam com largura dinâmica e ocupam apenas o espaço disponível, quando não cabe mais faz o ellipsis.

O flex por default é row, isso que dizer que um "container" com display:flex vai colocar todos os seus filhos lado a lado em uma única linha. A propriedade flex-wrap:nowrap vai garantir que esse "container" com flex não vai jogar nenhum filho para a linha de baixo. Se vc quiser uma largura mínima basta colocar min-width:40px por exemplo. Assim nenhum elemento terá menos de 40px de largura.

Veja o exemplo (apenas editei o css para ficar melhor de visualizar o layout)

.cloud_current_folder{
    display:flex;
    flex-wrap: nowrap;
    height:20px;
    position:relative;
    top:30px;

    background-color:#eff;
}
.cloud_current_folder > div{
    line-height:20px;
    font-size:16px; 
    font-weight:550;
    color: rgba(19, 19, 19, 0.9);
    
    border: 1px solid;

    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
<div class="cloud_current_folder">
    <div data-folder-name>5 Lorem ipsum dolor sit amet.</div>
    <div data-spliter>6 Lorem ipsum dolor sit amet consectetur.</div>
    <div data-folder-name>7 Lorem ipsum dolor sit, amet consectetur adipisicing.</div>
    <div data-folder-name>7 Lorem .</div>
    <div data-folder-name>7 Lorem ipsum dolor sit, amet consectetur adipisicing.</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .