CSS text-overflow: ellipsis; не работает?

Принятый ответ отличный. Однако вы все равно можете использовать ширину в процентах (%) и добиться эффекта text-overflow: ellipsis. Решение очень простое:

display: inline-block; /* для строчных элементов, напр. span, strong, em и т.д. */
text-overflow: ellipsis;
width: calc(80%); /* Вот в чем хитрость! */

Кажется, что всякий раз, когда вы используете calc, конечное значение отображается в абсолютных пикселях, что, соответственно, преобразует 80% в что-то вроде 800px для контейнера шириной 1000px. Поэтому вместо использования width: [ВАШ ПРОЦЕНТ]% используйте width: calc([ВАШ ПРОЦЕНТ]%).

У вас возникла проблема с динамической шириной элементов, и вы хотите решение, которое будет легко работать с ней. В данном случае вы можете использовать CSS Grid.

Вот как выглядит код:

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}

<div class="parent">
  <div class="dynamic-width-child">
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="fixed-width-child">Why?-Zed</div>
</div>

В этом примере .parent задаёт сетку с двумя колонками: первая колонка имеет автоматическую ширину (auto), а вторая занимает оставшееся пространство (1fr). Элемент с классом .dynamic-width-child будет адаптироваться под содержание, но если оно превышает доступное пространство, текст будет обрезан с помощью text-overflow: ellipsis. Элемент с классом .fixed-width-child не изменяет свою ширину и отображает текст в одной строке. Это решение позволяет вам гибко работать с динамическими ширинами элементов.

Чтобы сделать текст с многоточием (ellipsis) в CSS, необходимо добавить четыре строки к вашему коду. Ниже приведен пример стиля класса .app a, в котором эти строки включены:

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Обратите внимание: четыре строки ниже необходимы для работы многоточия.
 */

 display: block; /* Измените по своему усмотрению. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Без этих строк многоточие может не отображаться корректно. Убедитесь, что элемент имеет фиксированную ширину (в данном случае 140px), иначе текст будет занимать все доступное пространство, и многоточие не сработает.

Чтобы добиться эффекта обрезки текста с многоточием в HTML, вам нужно добавить указанные стили к контейнеру div, содержащему абзац. Вот пример кода:

<div style="white-space: nowrap; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000;">
    Ваш текст здесь, который вы хотите обрезать с многоточием.
</div>

Эти CSS-стили делают следующее:

• white-space: nowrap; — предотвращает перенос текста на новую строку.
• width: 50px; — устанавливает фиксированную ширину контейнера.
• overflow: hidden; — скрывает текст, который выходит за пределы контейнера.
• text-overflow: ellipsis; — добавляет многоточие в конце строки, если текст не помещается в отведенное пространство.
• border: 1px solid #000000; — добавляет рамку вокруг контейнера для наглядности.

Вы можете настроить ширину и другие параметры по своему усмотрению.

Теги anchor, span и т.д. по умолчанию являются встраиваемыми элементами. У встраиваемых элементов свойство width не работает. Поэтому вам необходимо преобразовать ваш элемент в либо inline-block, либо блочный элемент.