Question 168529 in CSS Question posted in
Some basic documentation can be found here.

Can I use CSS to fill the line-wrap gaps in 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

Tags:

3

Answers


  1. 0

    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:

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    If transparency is not need you can play with gradients:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search