Переполнение текста: свойство ellipsis css не работает в Firefox, также не работает прежнее решение для stackoverflow

Question

Я использовал загрузочные классы мультимедиа, я хочу разбить новую строку своим заголовком и описанием (зажимать и помещать многоточие, если оно превышает ширину), я также использовал следующие свойства css и теги

, но это не так работает то есть

white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;

заголовок переполняется из div, я просто хочу подогнать его по ширине, применяя выше CSS. он работает нормально в хроме. но не в Firefox.

Answer 1

Просто установите следующие определения для внутреннего DIV:

text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
width: 100%;

• "ширина" может быть любой, что вам нужно, если она является окончательной (px или%). В противном случае эффект «многоточия» не будет работать, поскольку браузер не знает, где «заканчивается» контейнер и что содержимое переполняется с этого момента.

Answer 2

Согласно этой теме, гарантируют, что ваш текст ограничен , сделав элемент или его родителя равным display:block или display:inline-block и имеющим width или max-width (не в %).

Есть несколько других методов, которые вы можете попробовать на этой странице.