Question

我一直在尝试使用css用破折号填充段落的最后一行，但我似乎无法找到一种方法。

基本上，我从数据库中获取一些数据（文本）并将其输出到段落，但我不知道它有多少文本，也不知道父div的大小。< / p>

考虑到所有这些，我需要用破折号填充段落最后一行的剩余空格。

例如：

Lorem ipsum dolor坐下来，精神上的精神。 Nunc eu malesuada lacus，在aliquam diam。 Sed feugiat，leo tempor maximus accumsan，erat mi elementum nisi，quis vehicula nunc nibh in nibh .---------------------------- -------------------------------------------------- --------------------------------

我尝试过使用我发现的一些css代码，但是我无法根据我的情况调整它们使用display:flex（我认为？）其他基本上是很多短划线和{{1它不起作用，因为它隐藏了第一行之后我的段落上的所有内容。

Answer 1

尝试

＆＃13;

p {
  position: relative;
  overflow: hidden;
  width: 100%;
}
p:after,
p::after {
  content: "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
  display: inline-block;
  width: 100%;
  height: auto;
  z-index: -1;
  position: absolute;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.</p>

＆＃13;

Answer 2

您可以使用hr标记代替破折号。它不需要结束标记。

hr标记示例：

Lorem ipsum dolor坐下来，精神上的精神。 Nunc eu malesuada lacus，在aliquam diam。 Sed feugiat，leo tempor maximus accumsan，erat mi elementum nisi，quis vehicula nunc nibh in nibh。

如何使用CSS填充破折号填充段落（直到行尾）

2 个答案: