如果不需要透明度，可以使用渐变：

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>

这将让你开始工作：
1.计算（或设置）每行的字符数和总行数。
1.用破折号填充一个容器，并将其放置在原始文本后面。
1.将原始文本放在一个白色背景的跨度中，以便只显示行尾的破折号
非常快的写起来，随时改进：

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 demo