线夹出乎意料地工作

Question

我正在努力让

line-clamp

发挥作用。我使用 Tailwind CSS（不幸的是）。正如我在添加实用程序类

line-clamp-2

之前多次所做的那样（我只需要显示 2 行文本）。正如您所看到的，出现了省略号，但在第三行我们看到了文本的其他部分。有人可以帮我吗？ 该下拉菜单有标记。附上截图。

  <ul class="max-w-md rounded-xl bg-white py-2 text-sm shadow-2xl">
    <li
      class="my-0.5 px-3 py-2 font-medium line-clamp-2"
    >
      {{ currentUserAlias }}
    </li>
    <li v-for="(profileMenuItem, index) in items" :key="index" class="my-0.5">
      <Component
        :is="'a'"
        class="block whitespace-nowrap px-3 py-2 font-normal hover:bg-primary-100"
        :to="profileMenuItem.href"
        :href="getAbsoluteLink(profileMenuItem.href)"
      >
        {{ profileMenuItem.title }}
      </Component>
    </li>
  </ul>

Answer 1

下一行的部分文本由于

py-2

而显示（填充会改变元素高度）。

line-clamp-{n}

实用程序在

n

行的末尾添加点，但它确实NOT神奇地从DOM中删除文本（您可以在浏览器中检查它） - 这就是为什么它还添加

overflow: hidden;

属性

为了修复它，请为文本添加内部包装并在其上放置

line-clamp-2

<ul class="max-w-md rounded-xl bg-white py-2 text-sm shadow-2xl">
    <li
      class="my-0.5 px-3 py-2 font-medium"
    >
      <div class="line-clamp-2">
        {{ currentUserAlias }}
      </div>
    </li>
    
    // that part is irrelevant
  </ul>

现在，无论外部填充是什么，您都会有两条夹紧线

Answer 2

对我来说，它实际上是 py-2，你可以将其替换为 my-2 或其他东西