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

С родительским 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 текст только усекается ...

рабочий пример

Любые идеи ?

css firefox

30.11.2018 11:32

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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, прежде чем вводить стиль библиотеки.

— 30.11.2018 12:02

@ ThomasBihan-Poudel, может быть, вопрос: почему он работает в Chrome? .. мне кажется, что Chrome не должен добавлять многоточие

— 30.11.2018 12:04

30.11.2018 11:37