Wrap text with styles, not line breaks

by Manuel Souto Pico

HTML

<body>

<h1>Wrapping text with CSS</h1>

<p>Let's see what the same text looks like both forcing wrapping manually (by explicitly inserting line breaks in the text and letting the browser take care of wrapping automatically (with CSS styles), in different widths.</p>

<h2>Width: 25em</h2>

<p>The text below looks the same when line breaks are inserted manually or when the text is wrapped automatcially through styling rules.</p>

<h4>With line breaks:</h4>

<div class="width30"> Since the 1970s, scientists have been <br/> worried about the amount of Dioxin, a <br/> toxin in fish caught in Baltic Sea.</div>

<h4>With styles:</h4>

<div class="width30 test"> Since the 1970s, scientists have been worried about the amount of Dioxin, a toxin in fish caught in Baltic Sea.</div>

<h2>Width: 18em</h2>

<p>The same text as above is rendered correctly when the text is wrapped automatcially through styling rules but it scales badly where line breaks were inserted manually.</p>

<h4>With line breaks (in the same position as above):</h4>

<div class="width18"> Since the 1970s, scientists have been <br/> worried about the amount of Dioxin, a <br/> toxin in fish caught in Baltic Sea.</div>

<h4>With styles:</h4>

<div class="width18 test"> Since the 1970s, scientists have been worried about the amount of Dioxin, a toxin in fish caught in Baltic Sea.</div>

</body>

<!-- another way:
https://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
-->

CSS

div {
  font-family: monospace;
}

div.test {
  
  word-wrap: break-word;
}

div.width30 {
  width: 25em;
}

div.width18 {
  width: 18em;
}