[英]How to prevent flex object from overflowing it's container?
I tried the solutions already available on StackOverflow, but nothing works for my code.我尝试了 StackOverflow 上已有的解决方案,但对我的代码无效。 For information, I am using TailwindCSS.
有关信息,我正在使用 TailwindCSS。
I am working on a little app with a messaging system.我正在开发一个带有消息系统的小应用程序。 In a column, I put all the contacts and their last message.
在一个专栏中,我放置了所有联系人和他们的最后一条消息。 I want to hide the rest of the message that doesn't fit in the container.
我想隐藏不适合容器的消息的 rest。
Here is my code, can you help me figure out why it keeps overflowing?这是我的代码,你能帮我弄清楚为什么它总是溢出吗?
<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>
Here is a screenshot of what is wrong:这是错误的屏幕截图:
Use below code in style使用下面的代码风格
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.