How can I combine explicit line breaks and legitimate text with CSS

Question

I publish some poems using HTML and CSS that combine concrete, explicit line breaks and excuses. So, I need to achieve something similar to this image, with each line breaking exactly where it shows:

But it text-align: justifydoes not work if line breaks exist, for example:

<p style="text-align: justify;">
Bacon ipsum dolor amet andouille<br />
meatloaf rump meatball, shank ribeye<br />
jowl turkey swine. Drumstick tri-tip<br />
brisket, cupim tongue andouille chuck<br />
spare ribs. Bresaola cow drumstick,<br />
tail boudin ground round sausage<br />
kielbasa prosciutto turkey andouille<br />
jowl spare ribs. Short ribs brisket.<br />
</p>

Run code

Answer 1

you can include brin spanto insert blank lines between pieces of text.

then you can reduce it line-heightto half, so the intervals do not expand by one full line height.

width - p

span {
  /* add an extra line */
  display: inline-block;
  width: 100%;
}
p {
  /* reduce line-height to half to include spans */
  line-height: 0.6em;
  /* set a reasonnable width */
  width: 15em;
  text-align: justify;
}

<p>
  Bacon ipsum dolor amet andouille<span></span>
  meatloaf rump meatball, shank ribeye<span></span>
  jowl turkey swine. Drumstick tri-tip<span></span>
  brisket, cupim tongue andouille chuck<span></span>
  spare ribs. Bresaola cow drumstick,<span></span>
  tail boudin ground round sausage<span></span>
  kielbasa prosciutto turkey andouille<span></span>
  jowl spare ribs. Short ribs brisket.<span></span>
</p>

Answer 2

, , html .

div.col-50 {
  width: 50%;
  /* set a minimum width to avoid line breaks on small screen or try @media query */
  min-width: 350px;
}
p.justify-all {
  text-align: justify;
  line-height: 1em;
  font-size: 1.2em;
  font-family: Cambria, "Times New Roman", "Lucida Bright";
}
p.justify-all > span.ph {
  /* set a place holder */
  display: inline-block;
  width: 100%;
}
p.justify-all > span.red {
  color: red;
}
p.justify-all > span.green {
  color: green;
}

<div class="col-50">
  <p class="justify-all">
    Bacon ipsum <span class="red">dolor</span> amet andouille<span class="ph"></span>
    meatloaf rump meatball, shank ribeye<span class="ph"></span>
    jowl turkey swine. <b>Drumstick tri-tip</b><span class="ph"></span>
    brisket, cupim tongue andouille chuck<span class="ph"></span>
    spare ribs. <span class="green"><b>Bresaola</b> cow</span> drumstick,<span class="ph"></span>
    tail boudin ground round sausage<span class="ph"></span>
    <span class="red">kielbasa <i>prosciutto</i></span> turkey andouille<span class="ph"></span>
    jowl spare ribs. Short ribs brisket.<span class="ph"></span>
  </p>
</div>

jsfiddle

. , span.bold, span.italic <b> <i> . ref: http://www.w3.org/International/questions/qa-b-and-i-tags