CSS, Flexbox, Tailwind-CSS, text-nowrap ⇐ CSS

[Гость]

Я пытаюсь создать веб-клон WhatsApp, используя next.js и CSS попутного ветра, и работаю над карточкой чата. Но я получаю это, когда пытаюсь уместить сообщение в одну строку и заменить лишний текст на "...".

Один из способов — попытаться исправить ширину элемента сообщения, но я хочу, чтобы он был более отзывчивым и менял расположение трех точек в зависимости от размера экрана. Я также пробовал без фиксированной ширины, в этом случае ширина родительского элемента меняется и начинается переполнение

{переполнение: скрыто; переполнение текста: многоточие; пробел: nowrap;} введите здесь описание изображения. Оно имеет фиксированную ширину, но, как видите, оно не увеличивается с размером экрана.

введите здесь описание изображения. И когда я не указываю фиксированную ширину, родительский контейнер переполняется даже при использовании служебного класса усечения

Ниже приведен код моего компонента:

импортировать изображение из «next/image»; импортировать React из «реагировать»; const Карточка = () => { возвращаться ( trainwithrc

11.09.2023
Руки ко замок рхо локоть пр разгибание нхи хони чахие билкул бхи ); }; экспортировать Chatcard по умолчанию;
Я пытаюсь решить эту проблему последние два дня и чувствую себя пораженным. Любая помощь очень ценится. Спасибо за ваше драгоценное время.