Question

有一个父div和一个子div

<div class="div-parent">
    <div class="div-child">
        Oportunum est, ut arbitror, explanare nunc causam.
    </div>
</div>

使用文本溢出：div父级上的省略号

.div-parent {
    border: solid 1px black;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.div-child {
    display: inline-block;
}

在Chrome上，文本会被截断，并在需要时添加“ ...”。

但是在Firefox上，文本仅被截断...

fiddle

有什么想法吗？

Answer 1

我认为 Firefox做正确的事情，因为从技术上讲，子div设置为inline-block，因此它将适合其内容并且将溢出父元素。因此inline-block不会溢出文本。

您应使子width:100%出现文本溢出并将属性移到子div：

.div-parent {
  border: solid 1px black;
  width: 200px;
  white-space: nowrap;
}
.div-child {
  display: inline-block;
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="div-parent">
  <div class="div-child">
    Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.
  </div>
</div>

在子元素上发出Firefox文本溢出：省略号

1 个答案: