css - Tailwind - 单行截断文本

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>

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

Answer 1

你有没有试过tailwind line-clamp plugin ？在这种情况下，line-clamp-1 将是一种解决方案。

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

所以我建议你在 h3 className(职位部分)中将“truncate overflow-ellipsis”更改为“line-clamp-1”

下面是一个有效的测试代码。

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