如何在已经具有多个子元素的父 div 上应用"text-overflow: ellipsis"属性

Question

我需要在具有 3 个子div 的div 上应用text-overflow: ellipsis属性。

<div class='external-div'>
<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>
</div>

因此，在上面的代码中，我无法对子div应用text-overflow，因为所有子div都具有动态数据。所以完整的字符串应该根据功能获得椭圆。那么我应该为此编写什么 CSS？

Answer 1

您需要指定overflow, whitespace, width, and display属性才能使其正常工作。

要选择所需的div，您需要选择父div 的子级，您可以通过.external-div div{ CSS }

如果您在div 中有孩子，您只需要选择它们(例如。.external-div div, .external-div div p{ CSS }继续为每个元素添加逗号。

JSfiddle

Answer 2

你可以试试这个

.external-div {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Answer 3

你可以试试这个：

#div1 {
white-space: nowrap; 
width: 12em; 
}
#div1 span.dots{
width:15%;
float:right;
padding-left:5%;
}
.before-dots{
width:80%;
float:left;
overflow: hidden;
}

<div class='external-div' id="div1">
<div class="before-dots">
<span> Div 1 </span>
<span> Div 2 </span>
<span> Div 3 </span>
<span> Div 4 </span>
<span> Div 5 </span>
<span> Div 7 </span>
<span> Div 8 </span>
<span> Div 9 </span>
<span> Div 10 </span>
</div>
<span class="dots">....</span>

</div>

Answer 4

我能够让我的父divtext-overflow: ellipsis使用div子元素

html格式就像

<div
style="height: inherit; overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis; width: 260px; min-width: 260px;"
>
<div style="display: inline;">abcdefghijklmnopqrstuvwxyz</div>
<div style="display: inline;">zyxwvutsrqponmlkjihgfedcba</div>
<div style="display: inline;">1234567890987654321</div>
</div>