Force Divs with text to remain in the same line?

Question

I have the following HTML structure:

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

And the following 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;
}

The size of cloud_current_folder will be dynamic, that is to say 100%, but for the purpose of testing I put 200px, when the size of the Divs containing the name of the current folder is greater than such value, such Divs are placed in new rows:

And I’d like to make that, the current size of the Divs data-folder-name are readjusted and the text within them is cut, an effect like this:

In a way that no matter how many other Ivs are added, the current ones resize by making room for a new one. How could it be done?

Answer 1

Leo with flex I think you get something very close to what you want. With it the divs are with dynamic width and occupy only the available space, when no longer fits does the ellipsis.

The flex for default is row, that means a "container" with display:flex will put all your children side by side in a single line. The property flex-wrap:nowrap will ensure that this "container" with flex won’t throw any son to the bass line. If you want a minimum width just put min-width:40px for example. So no element will be less than 40px wide.

Take the example (I just edited the css to better view the 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>