After word break, align next line to the left rather than center

html css word-wrap word-break text-styling
R3C0Nx00 picture R3C0Nx00 · Sep 10, 2018 · Viewed 12.2k times · Source

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.

Answer

Paulie_D picture Paulie_D · Sep 10, 2018

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>

Related questions

Difference between overflow-wrap and word-break?

What´s the exact difference between overflow-wrap/word-wrap and word-break? And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap but it doesn't look …

Read More
CSS, Text overflows out of table cell

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions: Table code: https://dl.dropboxusercontent.com/u/108321090/…

Read More
How to word wrap text in HTML?

How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div (say 200px) be wrapped? I am open to any kind of solution such as CSS, jQuery, etc.

Read More