文本溢出：省略号：当我们在一个 div 中有多个级别的 HTML 元素时不起作用

Question

我有两个div

在第一个文本中，直接在div内部，我们可以在宽度(55px)的末尾看到三个点

但在第二个div的省略号中没有显示"..."——55px末尾有三个点这里的区别只是秒的结构div包含多个级别h6->span->a视觉文本显示为55px，但末尾没有出现三个点

有什么想法吗？

.parent{
width:100%;
border: 1px solid white;
}
.left-children{
width:50%;
border: 1px solid black;
float:left;
display:inline-block;
}
.right-children{
width:49%;
border: 1px solid black;
float:right;
display:inline-block

}
.ellipsis-children{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:55px
}

<div class="parent">
<div class="left-children">
left
</div>
<div class="right-children">
<div class="ellipsis-children">
righ righ righ righ righ righ righ righ righ righ righ righ 
</div>
</div>
</div>

<div class="parent">
<div class="left-children">
left
</div>
<div class="right-children">
<div class="ellipsis-children">
<h6>       
<span>
<a href="#">
righ righ righ righ righ righ righ righ righ righ righ righ 
</a>
</span>
</h6>
</div>
</div>
</div>

Answer 1

因为h6是块元素。你让它内联，然后它就工作了：

.parent {
width: 100%;
border: 1px solid white;
}
.left-children {
width: 50%;
border: 1px solid black;
float: left;
display: inline-block;
}
.right-children {
width: 49%;
border: 1px solid black;
float: right;
display: inline-block
}
.ellipsis-children {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 55px
}
/* ------ new rule --------------- */
.ellipsis-children h6 {
display: inline;
}

<div class="parent">
<div class="left-children">
left
</div>
<div class="right-children">
<div class="ellipsis-children">
righ righ righ righ righ righ righ righ righ righ righ righ
</div>
</div>
</div>
<div class="parent">
<div class="left-children">
left
</div>
<div class="right-children">
<div class="ellipsis-children">
<h6>
<span>
<a href="#">
righ righ righ righ righ righ righ righ righ righ righ righ 
</a>
</span>
</h6>
</div>
</div>
</div>

Answer 2

text-overflow不"传播"；到块级子元素(与例如font-size相反(。因此，您必须将其直接应用于需要它的子块级元素：

.parent {
width: 100%;
border: 1px solid white;
}
.left-children {
width: 50%;
border: 1px solid black;
float: left;
display: inline-block;
}
.right-children {
width: 49%;
border: 1px solid black;
float: right;
display: inline-block
}
.ellipsis-children {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 55px
}

<div class="parent">
<div class="left-children">
left
</div>
<div class="right-children">
<div class="ellipsis-children">
right right right right right right
</div>
</div>
</div>
<div class="parent">
<div class="left-children">
left
</div>
<div class="right-children">
<div>
<h6 class="ellipsis-children">

<span>
<a href="#">
right right right right right right
</a>
</span>
</h6>
</div>
</div>
</div>