在 CSS 中，如何用破折号填充段落中每一行的空白区域

发布于05月14日

我一直试图弄清楚这一点，但找不到答案.我想要做的是用破折号填充空格，但不只是最后一行，我想填充每一行，因为我没有使用JUSTIFY作为文本对齐.

推荐答案

这将使您开始处理以下内容:

计算(或设置)每行字符数和总行数.
用短划线填充一个容器，并将其放在原始文本的后面.
将原始文本放在白色背景的跨度中，以仅显示行尾的破折号

写得很快，随时可以改进:

const lineHeight = 16;
const maxLength = 30;
const height = document.querySelector(".wrapper").scrollHeight
const fillup = document.querySelector(".fillup");
fillup.innerHTML = "-".repeat(height / lineHeight * maxLength);

.wrapper {
  position: relative;
  font-family: Courier;
  max-width: 30ch;
  line-height: 16px;
}

span {
  background: white;
}

.fillup {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  max-height: 100%;
  overflow: hidden;
}

<div class="wrapper">
  <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
  <div class="fillup"></div>
</div>