https://i.stack.imgur.com/Tsmf5.png
The ellipsis '...' is not showing up even after I have applied text-ellipsis, overflow hidden, and nowrap to this div.
Take a look at my code:
import Image from "next/future/image";
import Link from "next/link";
export default function MenuOption({ title, description, icon, route }) {
return (
<Link href={route}>
<div className="flex h-[74px] w-full cursor-pointer gap-4 overflow-hidden text-ellipsis rounded-lg bg-gray-50 p-4 ring-1 ring-gray-300 drop-shadow-sm hover:ring-2">
<Image src={icon} alt={`${title} Icon`} className="mt-1 h-5 w-auto" />
<div className="float-left inline-block overflow-hidden text-ellipsis whitespace-nowrap">
<h2 className="text-md font-medium text-gray-900">{title}</h2>
<p className="text-sm text-gray-500">{description}</p>
</div>
</div>
</Link>
);
}