Find a DIV if its coming in next line and hide the rest of the DIVs-CodePudding

My DIV is 300px width. Under that I have another 5 DIV with some text(Some Text in every DIVs). I need to hide the rest of the DIV if it touches the end of the first row.

To be more clear, if 3rd div's reach the end of 300px, then hide the 4th and 5th DIV instead of pushing it to next line and also i need to add CSS ELLIPSES to the end of the row.

<div width="300px">
    <div> First Div</div>
    <div> Second Div</div>
    <div> Third Div</div>
    <div> Fourth Div</div>
    <div> Fifth Div</div>
</div>

i need output like this.

First Div | Second Div | Third Div| ...

First div content | Second content | ...

First div with contents goes here | ...

CodePudding user response：

have look at these example: Wrapping_Text

perhaps in combo with display: inline;

CodePudding user response：

You can also change to a span.

<div class="wrapper">
    <span>First Div</span>
    <span>Second Div</span>
    <span>Third Div</span>
    <span>Fourth Div</span>
    <span>Fifth Div</span>
</div>

.wrapper {
  width: 200px;
  border: 1px solid red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

 /* This selector is just if you wanna add "|" delimiter with pseudo selector */
.wrapper span:not(:last-child):after {
  content: ' | ';
}