Tailwind - Truncate Text in single line

Question

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

Anyway to restrict the over follow of the text outside the container?

Answer 1

Have you ever tried tailwind line-clamp plugin? In this case, line-clamp-1 would be a solution.

<p class="line-clamp-1"> {text} </p>

So I recommend you to change "truncate overflow-ellipsis" to "line-clamp-1" in the h3 className (job title section)

Below is a test code that works.

<div className="w-432px bg-yellow-200 relative shadow md:rounded-sm hover:shadow-md">
  <Link href="/">
    <a className="block p-4 sm:px-6">
      <div className="flex items-center">
        <div className="flex-1  flex flex-col md:items-center md:space-x-3 md:flex-row">
          <h4 className="text-sm text-gray-500 uppercase truncate md:w-24">
            company name, company name, company name
          </h4>
          /* here */
          <h3 className="font-medium text-gray-700 line-clamp-1">
            job title job title job title job title job title
          </h3>
          /* */
        </div>
        <div className="ml-4 flex-none flex flex-col items-end 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">
              <GlobeIcon
                className="inline-block w-4 h-4 mr-1"
                aria-hidden="true"
              />
              Remote
            </span>
          </div>
          <div className="text-sm text-right text-gray-500 md:w-24">
            4 minutes ago
          </div>
        </div>
      </div>
    </a>
  </Link>
</div>

Answer 2

This is a quick solution with tailwind css, you can use the built-in truncate class

<div class="p-3 shadow-md w-full m-5 border border-gray-200 truncate">
    This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text 
</div>