CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 891

How can I combine explicit line breaks and justified text using CSS

I'm publishing some poems using HTML and CSS that combine specific, explicit line breaks and justification. So, I need to achieve something like this image, with each line being broken exactly where it shows:

enter image description here

But text-align: justify doesn't appear to work when line breaks are present, such as with:

<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>

Upvotes: 4

Views: 916

Answers (2)

Aung Myo Linn
Aung Myo Linn

Reputation: 2890

Check this out, try running the code snippet in fullpage, and it's valid html and responsive.

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>

Here's another example on jsfiddle

NOTE: if possible, use span.bold, span.italic instead of <b> & <i> tags as they can make localization of content difficult. ref:http://www.w3.org/International/questions/qa-b-and-i-tags

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

you may turn br into span to insert empty lines in between pieces of text.

then you may reduce line-height to about half, so spans do not expand on one full line's height.

Set a reasonnable width to 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>

Upvotes: 3

Related Questions