How to set equal horizontal paddings for first line in text?

[poznavauka]

Hi everyone!
I have a layout fragment:

This is fragment of my html and css code:

<header>
     <p>Hi there! We are the new kids on the block
                    and we build awesome websites and mobile apps.</p>
</header>

header {
  background-color: #87509c;
  font-family: sans-serif;
  color: #ffffff;
}
    p {
  padding: 147px 97px 67px 97px;
  font-weight: bold;
  font-size: 2.63em;
  text-align: center;
  color: #f7f3ea;
}

This is a result:

Please tell me how can I set equal padding for first line in text like in layout example above?

Thank you!

[Erik_J]

The second text seems like it’s justified.

Two good resources about text-justify:

text-justify | CSS-Tricks

text-justify - CSS: Cascading Style Sheets | MDN

And don’t forget the second line:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last

[coothead]

Hi there poznavauka,

and a warm welcome to these forums.

Here is an example that uses various line breaks
giving different effects according to the page width…

https://codepen.io/coothead/full/wvKewgB

… and you can see the code here…

https://codepen.io/coothead/pen/wvKewgB

coothead

[PaulOB]

Here’s a contrived example that is a bit magic numberish but may be ok in certain situations.

Can’t guarantee all browsers will react the same.

[Erik_J]

@PaulOB

that is a bit magic number ish but may be ok in certain situations.

In some widths the last line might contain just a couple of words, making it look peculiar.

If you use the trick above with a lesser margin on the pseudo element you can achieve a more pleasant minimum number of words in last line, e.g. a magic number of 30 - 60 % or vw.

Just my two cents.

[PaulOB]

@Erik_J

can achieve a more pleasant minimum number of words in last line, e.g. a magic number of 30 - 60 % or vw.

Yes I originally had it set lower but left it at 100vh just to show the effect that it does have on the justification. A smaller value would stop the orphans being forced to justify and would be more pleasing.