我的 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 放在這里 | ...
uj5u.com熱心網友回復：
看看這些例子：Wrapping_Text
也許結合 display: inline;
uj5u.com熱心網友回復：
您也可以更改為跨度。
<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: ' | ';
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338624.html
標籤：javascript css
下一篇：如何加寬css中元素的側邊欄