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

[Anonymous]

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

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

{переполнение: скрыто; переполнение текста: многоточие; пробел: nowrap;} (https://i.stack.imgur.com/Y7mu9.png) Это фиксированная ширина, но, как вы можете видеть, она не увеличивается с размером экрана.

(https://i.stack.imgur.com/WIOM5.png) И когда я не указываю фиксированную ширину, родительский контейнер переполняется даже с помощью служебного класса усечения

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

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

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