Как предотвратить переполнение гибкого объекта контейнером?

Question

Я пробовал решения, уже доступные в StackOverflow, но с моим кодом ничего не работает. Для информации, я использую Tailwind CSS.

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

Вот мой код, не могли бы вы помочь мне выяснить, почему он продолжает переполняться?

<div class="w-1/3">
    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
        <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-16 w-16 rounded-full">
            <div class="flex flex-col justify-center ml-2 w-full">
                <p class="font-bold">Mark Dupuis</p>
                <p class="text-sm text-gray-600 whitespace-no-wrap overflow-hidden">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
            </div>
        </div>
    </div>

Здесь это изображение того, что не так: введите описание изображения здесь

Answer 1

Используйте код ниже в стиле

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