How to add line breaks to justified text?

Question

I have a block of text in paragraph element with the following css:

p {
    text-align: justify;
    text-align-last: left;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

Here is the text:

DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.

The result looks like this:

What I dislike is the spacing between 'today's operational and fiscal' line. I want to move the 'a' down a line and the 'help' down a line to spread out the word density.

The problem: When add a <br /> before the word 'a' and the word 'help' I get the following:

Now the left edge of the text block is not flush.

The Question:

How can I force the words to be on the next lines without adjusting the size of the text block?

Answer 1

A better solution would be to use multiple elements. Take the places you want line breaks and separate those sections into individual sections.

Once they are separate sections, they can be displayed in a column to look like they are all one element.

Text unaltered:

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: left;
}

<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.</p>

Using line breaks:

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: left;
}

<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over <br/>a decade of field experience DRG is uniquely positioned to <br/>help customers succeed in today’s operational and fiscal environment.</p>

Using separate sections:

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: justify; /* not really the last line */
}
/* The last line of the last p, should use left alignment */
.text.last {
  text-align-last: left;
}

<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over</p><p class="text">a decade of field experience DRG is uniquely positioned to </p><p class="text last">help customers succeed in today’s operational and fiscal environment.

Answer 2

Browsers are crap at fine-tuned typography. Full justification makes text HARDER to read for users and, in general, should be avoided.

Different browsers and operating systems will render the text slightly differently and there is no guarantee that the text will wrap where you expect it anyway. You may end up fixing it for yourself and braking it elsewhere. Trying to micro-manage this is a fruitless exercise.

See: http://nedbatchelder.com/blog/200806/bad_web_typography_full_justify.html

Answer 3

I found a solution based on a comment by Jongware.

I used (word at end of one line)<nobr>&nbsp;(word at start of next line).

It stuck the two words together and both words were added to the second line, looks great.