文章/答案/技术大牛

发布

问顺风截断单行文本
EN

Stack Overflow用户

提问于 2021-07-21 16:07:42

回答 2查看 2.3K关注 0票数 2

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

不管怎样，要限制容器外文本的超跟随吗？

tailwind-ui

css

tailwind-css

truncate

回答 2

Stack Overflow用户

发布于 2022-02-16 06:47:15

你试过顺风线夹插件吗？在这种情况下，线夹-1将是一个解决方案。

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

因此，我建议您将h3 className (职称部分)中的“截断溢出-省略”改为“线夹-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>

票数 3

Stack Overflow用户

发布于 2022-02-16 06:52:10

这是一个使用顺风css的快速解决方案，可以使用内置的truncate类。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68472942

复制

相似问题

问顺风截断单行文本
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风截断单行文本EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风截断单行文本
EN