CODEWITHSUNDEEP
htmlcss
Miguel Alves
Miguel Alves

Reputation: 25

How can i fill a paragraph (until end of line) with dashes using CSS

I've been trying to use css to fill the last line of a paragraph with dashes but i can't seem to find a way to do so.

Basically, i'm getting some data (text) from the database and output it to a paragraph but i don't know how much text it is nor do i know the size of the parent div.

With all of this in mind, I need to fill the remaining space in the last line of the paragraph with dashes.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.----------------------------------------------------------------------------------------------------------------

I've tried using some css codes i found but i couldn't adapt them to my situation some used display:flex (i think?) others were basically a lot of dashes and overflow:hidden which doesn't work because it hides everything on my paragraph after the first line.

Upvotes: 1

Views: 1939

Answers (2)

Tamil Selvan C
Tamil Selvan C

Reputation: 20209

Try

p {
  position: relative;
  overflow: hidden;
  width: 100%;
}
p:after,
p::after {
  content: "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
  display: inline-block;
  width: 100%;
  height: auto;
  z-index: -1;
  position: absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.</p>

Upvotes: 2

Hawkeye
Hawkeye

Reputation: 377

Instead of dashes, you can use the hr tag. It does not need a closing tag.

Example of the hr tag:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.

Upvotes: 0

Related Questions