无法隐藏溢出内容

Posted 2023-03-07

【中文标题】无法隐藏溢出内容

【英文标题】：unable to hide overflown content

【发布时间】：2020-04-15 15:41:49

【问题描述】：

我有这张卡，我用 tailwind css 完成了。但是从附图中可以看出，内容溢出了。

我已经在标签的 div 容器上设置了overflow-hidden 类，但这没有任何作用。

理想情况下，我正在寻找的是：

标题用省略号截断 溢出的标签被隐藏了

Code sandbox of the problem

<div class="flex flex-col justify-center items-center mb-20 mx-1 md:mx-0 mt-4">
  <div class="w-full md:max-w-2xl mt-5 py-2 md:p-2 md:px-5 md:py-3 rounded border-2 border-gray-300 shadow-thick-sm">
    <a href="/#"> </a>
    <div class="flex">
      <a href="/#">
        <div class="flex-shrink-0 margin-auto">
          <svg class="svg-inline--fa fa-user-circle fa-w-16 text-gray-700" style="width: 70px; height: 70px;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg="">
                <path
                  fill="currentColor"
                  d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"
                ></path>
              </svg>
        </div>
      </a>
      <div class="pl-4">
        <a href="/#">
          <h3 class="font-medium text-2xl lg:text-left mb-1">
            <span>Some very very very very very very very very very very very very long title</span>
          </h3>
        </a>
        <div class="text-gray-600 font-medium whitespace-no-wrap hidden md:inline mb-3">
          <a href="/#"> </a
              ><a class="link-gray" href="/">
                @billybobjr | Dec 25
              </a>
        </div>
        <div class="flex mt-2">
          <span class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1">#encyclopedia</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#theforce</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#light</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#saber</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#starwars</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

【问题讨论】：

style="word-wrap: break-word;" 可能是它的作品

【参考方案1】：

添加到 h3 和 div class="flex mt-2 类 truncate w-2/5 truncate 类将添加

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap

和w-2/5

width: 40%;

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col justify-center items-center mb-20 mx-1 md:mx-0 mt-4 mx-20">
  <div class="w-full md:max-w-2xl mt-5 py-2 md:p-2 md:px-5 md:py-3 rounded border-2 border-gray-300 shadow-thick-sm">
    <a href="/#"> </a>
    <div class="flex">
      <a href="/#">
        <div class="flex-shrink-0 margin-auto">
          <svg class="svg-inline--fa fa-user-circle fa-w-16 text-gray-700" style="width: 70px; height: 70px;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg="">
                <path
                  fill="currentColor"
                  d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"
                ></path>
              </svg>
        </div>
      </a>
      <div class="pl-4">
        <a href="/#">
          <h3 class="font-medium text-2xl lg:text-left mb-1 truncate w-2/5">
            <span>Some very very very very very very very very very very very very long title</span>
          </h3>
        </a>
        <div class="text-gray-600 font-medium whitespace-no-wrap hidden md:inline mb-3">
          <a href="/#"> </a><a class="link-gray" href="/">
                @billybobjr | Dec 25
              </a>
        </div>
        <div class="flex mt-2 truncate w-2/5">
          <span class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1">#encyclopedia</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#theforce</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#light</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#saber</span
              >
              <span
                class="rounded text-sm font-medium py-1 px-2 rounded-full bg-gray-200 text-gray-800 mr-2 mb-1"
                >#starwars</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>