Tailwind - 截断单行文本

如何解决Tailwind - 截断单行文本

<div
            className={classNames(
                job.isFeatured ? 'bg-yellow-200' : 'bg-white','relative shadow md:rounded-sm hover:shadow-md'
            )}
        >
            <Link href={`/jobs/${encodeURIComponent(job.jobId)}`}>
                <a className="block p-4 sm:px-6">
                    <div className="flex items-center">
                        <div className="flex flex-col flex-grow md:items-center md:space-x-3 md:flex-row">
                            <h4 className="text-sm text-gray-500 uppercase truncate md:w-24">
                                {job.company_name}
                            </h4>
                            <h3 className="font-medium text-gray-700 truncate overflow-ellipsis">
                                {job.title}
                            </h3>
                        </div>
                        <div className="flex flex-col items-end flex-grow-0 flex-shrink-0 text-right md:space-x-5 md:flex-row">
                            <div className="flex items-center mb-1 text-sm text-right text-gray-600 md:mb-0">
                                <span className="text-right">
                                    {job.isRemote ? (
                                        <>
                                            <GlobeIcon
                                                className="inline-block w-4 h-4 mr-1"
                                                aria-hidden="true"
                                            />
                                            Remote
                                        </>
                                    ) : (
                                        <>
                                            <LocationMarkerIcon
                                                className="inline-block w-4 h-4 mr-1"
                                                aria-hidden="true"
                                            />
                                            {job.location.city}
                                        </>
                                    )}
                                </span>
                            </div>
                            <div className="text-sm text-right text-gray-500 md:w-24">
                                <Moment fromNow>{job.created_at}</Moment>
                            </div>
                        </div>
                    </div>
                </a>
            </Link>
        </div>

无论如何要限制容器外文本的过度跟随？