一个伪元素可以做到这一点。

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>

多线箝位只适用于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
我敢说这是一个相当恶心的解决方案。但要按盒子上说的做。

我假设你想在最后一行应用填充。也许你可以试试这个办法
在关闭p标签之前，你可以添加inline-block div width 1 Px和padding。

Temani的答案已被证明是理想的，例如在聊天框的末尾分配一个“间隔符”，以放置额外的数据并确保聊天文本不会与额外的数据冲突：

示例：

• 在消息（1）中有时间的空间。
• 在消息（2）中，时间将没有空间，并且单词“Barcelona”和时间图“2：54”将重叠。有了这个技巧，它就完美了。

HTML：

<div class="my-chat-message">
    <div class="my-text">{{ message.text }}</div>
    <div class="my-display-time">{{ message.displayTimeStamp }}</div>
</div>

CSS：

.my-text:after {
    content: "";
    display: inline-block;
    height: 2px;
    width: 30px; /* the value of padding */
    background: red; /* to illustrate */
}

目前，没有CSS选择器可以应用。
只能使用伪元素选择第一行：first-line。不幸的是，目前还没有最后一行的等价物。
也许，一些JavaScript或jQuery插件可以处理这个问题。

尝试使用这个例子，你需要插件定义使用线钳

添加Line-Clamp插件即可使用

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

tailwind示例

<!-- 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>

顺风Playgroundhttps://play.tailwindcss.com/ILpf8grjdF