Ошибка переполнения текста в Firefox: многоточие на дочернем элементе

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 текст только усекается ...

скрипка

Любые идеи?

Answer 1

I думаю 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>