In CSS, how can I fill the empty space of each line wrapped from a paragraph with dashes?

I've been trying to figure this out and can't find the answer. What I want to do is fill the empty space with dashes, but not on the last line only, I want to fill each line since I am not using justify for my text-align.

Something like this

If transparency is not need you can play with gradients:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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
}

<!-- language: lang-html -->

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

<!-- end snippet -->

This will get you started working on this:

1. Calculate (or set) the number of characters per line and the number of total lines.

2. Fill up a container with dashes and place it behind the original text.

3. Put the original text in a span with white background to only show the dashes at the end of the line

Very quick write-up, feel free to improve:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

You could do something like this:

<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