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

Time:03-04

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

CodePudding user response:

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>

  •  Tags:  
  • css
  • Related