我一直在想這個(gè)問(wèn)題，找不到答案。我想做的是用破折號(hào)填充空白，但不僅僅是在最后一行，我想填充每一行，因?yàn)槲覜](méi)有對(duì)我的文本對(duì)齊使用對(duì)齊。

類(lèi)似這樣的東西

如果不需要透明，你可以玩漸變:

p {
  font-size: 30px;
  font-family: sans-serif;
  margin: 20px;
  /* adjust the 20px and the 80% to control the dash */
  background: conic-gradient(at 80% 2px,#0000 75%,#000 0) 100% .5lh/20px 1lh;
  /* lh is a new unit if it doesn't work use the below 
   line-height: 1.2em;
   background: conic-gradient(at 80% 2px,#0000 75%,#000 0) 100% .6em/20px 1.2em;
   
   */
}
p span {
  background: #fff;
  padding-right: 10px;
  -webkit-box-decoration-break: clone
}

<p>
  <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod est quis modi, ab necessitatibus, ipsa alias cum consectetur, dolorum mollitia omnis cupiditate laboriosam debitis nisi? Laboriosam impedit voluptatibus minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod est quis modi, ab necessitatibus, ipsa alias cum consectetur, dolorum mollitia omnis cupiditate laboriosam debitis nisi? Laboriosam impedit voluptatibus minima.
    </span>
</p>

這將讓你開(kāi)始工作:

計(jì)算(或設(shè)置)每行的字符數(shù)和總行數(shù)。

用破折號(hào)填滿(mǎn)一個(gè)容器，放在原文后面。

將原始文本放在帶有白色背景的span中，以便只顯示行尾的破折號(hào)

非常快速的報(bào)道，請(qǐng)隨意改進(jìn):

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>

你可以這樣做:

<article>
  <p>
    <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod est quis modi, ab necessitatibus, ipsa alias cum consectetur, dolorum mollitia omnis cupiditate laboriosam debitis nisi? Laboriosam impedit voluptatibus minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod est quis modi, ab necessitatibus, ipsa alias cum consectetur, dolorum mollitia omnis cupiditate laboriosam debitis nisi? Laboriosam impedit voluptatibus minima.
    </span>
  </p>
  <div>
    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  </div>
</article>

CSS:

body {
  font-family: monospace;
}

article {
  width: 400px;
  position: relative;
  overflow: hidden;
}

p {
  position: relative;
  z-index: 2;
  margin: 0;
}

span {
  background-color: white;
}

div {
  position:absolute;
  z-index: 1;
  top: 0; bottom: 0; left: 0; right: 0; 
  text-align: justify;
}

CodePen演示