CODEWITHSUNDEEP
css
Henrik Petterson
Henrik Petterson

Reputation: 7094

Center justified text if it doesn't cover the full width of element

I have text-align set to justify:

p {
  text-align: justify;
  border:1px solid;
}

div {
  width:200px;
}
<div>
  <p>
    NAME
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet molestie enima
  </p>
</div>

How can I make it so if the length of the first line does not reach the right side of the element, then it is centered? So in the example above, NAME would be centered rather than aligned to the left.

Unfortunately, I can't adjust the setup of the element (can't wrap NAME into centered span tag etc). And the width is not fixed (above is just to illustrate the issue).

Upvotes: 0

Views: 40

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

you can use text-align-last: center;

p {
  text-align: justify;
  border:1px solid;
  padding: 0 auto;
  text-align-last: center;
}

div {
  width:200px;
}
<div>
  <p>
    NAME
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet molestie enima
  </p>
</div>

Upvotes: 2

Related Questions