找到一个DIV，如果它出现在下一行，隐藏DIV的其余部分

Question

我的div的宽度是300px。在这下面，我有另一个5 DIV与一些文本(一些文本在每个DIV)。我需要隐藏DIV的其余部分，如果它触及第一行的末尾。

为了更清楚，如果第3个div到达300px的末尾，然后隐藏第4和第5个div，而不是将其推到下一行，我还需要在行末尾添加CSS ELLIPSES。

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

我需要这样的输出。

第一Div|第二Div|第三Div|…

或

第一div内容|第二div内容|…

或

第一个有内容的div放在这里|…

Answer 1

看一下这些例子:

可能与display: inline;组合

Answer 2

也可以改成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: ' | ';
}