https://i.sstatic.net/juD2P.png
https://i.sstatic.net/WQo8o.png
Take a look at this code snippet:
<div className='mt-[3vh] flex h-1/3 min-h-fit w-[80%] min-w-[300px] flex-col content-center items-center justify-center rounded-2xl bg-white shadow-[0_0_8px_rgba(0,0,0,0.2)]'>
{user?.image && (
<img
src={user?.image}
width={120}
height={80}
className='mt-[-60px] w-1/3 min-w-[120px] rounded-full'
alt={`${user?.name}'s profile picture`}
/>
)}
<div className=' max px-3 text-center'>
<h3 className='my-5 text-4xl text-[24px] font-bold'>
{user?.name}
</h3>
<h2 className='mb-[40px] text-2xl text-[16px]'>{email}</h2>
</div>
</div>
I need to show the email on the card, but when it's too long, it overflows outside the boundaries. I attempted using the tailwind CSS truncate property, but the issue persists.
Any suggestions on how to tackle this problem?