html - 无法 overflow hidden 的内容

Question

我有这张卡片，我是用 tailwind CSS 制作的。但是正如您从所附图片中看到的那样，内容溢出了。

我设置了overflow-hidden标签的 div 容器上的类，但这不执行任何操作。

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

1. 标题用省略号截断
2. 溢出的标签只是隐藏

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>

Answer 1

添加到 h3 和 div class="flex mt-2 类 truncate w-2/5 class 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>