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:
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:
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?