6

I am styling my paragraphs and I have line break after a certain amount of characters. I want to be able to make the line after the break to be aligned left rather than center.

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}
<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
erikvimz
  • 5,256
  • 6
  • 44
  • 60
R3C0Nx00
  • 129
  • 1
  • 1
  • 9

2 Answers2

7

You can use text-align-last

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

MDN

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
  text-align-last: left;
  border: 1px solid red;
}
<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: left;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}
<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
user987
  • 31
  • 5