CODEWITHSUNDEEP
htmlcsstext
Alix Përry
Alix Përry

Reputation: 489

Force single line of text in element to fill width with CSS

I have a div element that holds one line of text. How can I get this text to fill the width 100%?

text-align:justify is only working on elements with several lines of text, and has no effect on the div with single line. Manually adjusting the letter-spacing and word-spacing is ugly and ineffective.

Are there any other alternatives?

Upvotes: 39

Views: 88464

Answers (2)

Alec
Alec

Reputation: 2752

The modern way to do this is with text-align-last: justify

Upvotes: 4

mutil
mutil

Reputation: 3305

Try this:

div {
  text-align: justify;
}

div::after {
  content: "";
  display: inline-block;
  width: 100%;
}
<div>
  Some sample testing string
</div>

jsFiddle

Take a look here for more info.

Upvotes: 56

Related Questions