对多行文本的截断行应用填充

Question

我希望仅将填充添加到填充元素的最后一行。我使用 Tailwind 类有以下 html：

<div className="my-3 max-h-[4.5rem] relative">
  <p ref={ref} className="inline-block line-clamp-3 pr-14">{data.description}</p>
  <button className="text-blue-600 leading-none absolute bottom-[-4px] right-0 font-medium px-2 py-1" onClick={() => setOpen(true)}>
    more
  </button>
</div>

右填充pr-14应用于整个p标签。我怎样才能让它只适用于最后一行？我已经尝试过等等block，inline但似乎都没有什么区别。这在 CSS 中可能吗？

对于上下文，当我需要显示“更多”按钮时，我尝试在最后一行添加填充。我能想到的唯一选择是执行类似下图的操作，但是不确定如何让文本淡入背景（我无法将背景应用到背景，more因为它是透明的）。

Answer 1

多线夹紧仅适用于此，display: -webkit-box;这就是您无法应用其他display属性的原因。

您可以使用带有合成的蒙版图像来到达您想要的位置。虽然不用担心背景颜色不匹配等：

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 70%, transparent 100%);
    -webkit-mask-position: 100% 100%, 100% 100%;
    -webkit-mask-size: 100% 100%, 120px 32px; /*120px is your padding*/
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: xor;

https://codepen.io/umbriel/pen/ZEKYqvr

我敢说这是一个非常恶心的解决方案。但按照盒子上说的做。