线夹出乎意料地工作

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，但它不会神奇地从 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>

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