将填充应用于段落的最后一行

Posted 2023-03-06

【中文标题】将填充应用于段落的最后一行

【英文标题】：Apply padding to last line of a paragraph

【发布时间】：2021-09-08 19:51:53

【问题描述】：

我希望仅在填充元素的最后一行添加填充。我有以下使用 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 背景，因为它是透明的）。

【问题讨论】：

你应该把你的描述分成多个<p>标签。有了这个，您可以定位特定的行

你会如何建议这样做？段落标签的宽度是动态的。

这样做很棘手。您可以拆分单词，然后在每个段落中添加 n 个单词。也许您可以详细说明您尝试使用填充解决的问题。最后一行需要添加什么填充？

问题已更新，包括一张图片。

如果您的设计要求不是太严格，您可以更改更多按钮的位置。 More button

【参考方案1】：

伪元素可以做到。

 p 
  font-size:20px;
  line-height:1.2em;
  margin:0;
  text-align:justify;


 p:after 
  content:"";
  display:inline-block;
  height:2px;
  width:50px; /* the value of padding */
  background:red; /* to illustrate */

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta.  efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta.  efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. 
  </p>

【讨论】：

我已经对此进行了测试，但它无法与 line-camp 一起使用，你有这个 css 的示例吗？

【参考方案2】：

多行钳位仅适用于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

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

【讨论】：

到目前为止，这是解决我问题的唯一答案！

【参考方案3】：

我假设您想为最后一行应用填充。也许你可以试试这个解决方案

在关闭 p 标签之前，您可以添加 inline-block div width 1 Px 和 padding。

【讨论】：

我试过这个但是元素被忽略了。我也尝试了不同宽度的 inline、block 和 inline-block。

【参考方案4】：

目前，没有适用的 CSS 选择器。

您只能使用伪元素 :first-line 选择第一行。不幸的是，目前最后一行没有等效项。

可能一些 javascript 或 jQuery 插件可以处理这个问题。

【讨论】：

对于可以定位在 DOM 中呈现的最后一行的 javascript 有什么建议吗？

有一个简单的插件：cssscript.com/style-last-line-paragraph

【参考方案5】：

试试这个例子，你需要插件定义使用Line-clamp

添加 Line-Clamp 插件使用

// tailwind.config.js
module.exports = 
  // ...
  plugins: [
    require('@tailwindcss/line-clamp'),
  ]

顺风示例

<!-- max-h-20 = max-height:5rem; -->
<div class="my-3 max-h-20 relative mx-10 border-2 border-gray-200">
  <!-- you need to Line-Clamp plugin define in tailwind.config.css -->
  <p ref="ref" class="flex line-clamp-3 p-1">a b c d e f g h i j k l m n o p q r s t u v w x y z
  </p>
  <button class="text-blue-600 bg-white leading-none absolute -bottom-0.5 right-0 font-medium px-2 my-2">more</button>
</div>

顺风游乐场 https://play.tailwindcss.com/ILpf8grjdF