如何防止 flex object 溢出它的容器？

Question

我嘗試了 StackOverflow 上已有的解決方案，但對我的代碼無效。 有關信息，我正在使用 TailwindCSS。

我正在開發一個帶有消息系統的小應用程序。 在一個專欄中，我放置了所有聯系人和他們的最后一條消息。 我想隱藏不適合容器的消息的 rest。

這是我的代碼，你能幫我弄清楚為什么它總是溢出嗎？

<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;