Breack text line where you want it to

by davidxmartins

HTML

<h1>Especialistas&nbsp;<wbr>em&nbsp;LSF<br>constução&nbsp;<wbr>em&nbsp;<wbr>aço&nbsp;leve</h1>

<h2>
Choose where the line should breack at diferent screen widths
</h2>
<h3>
In the example above:
</h3>
<h4>
<pre>
<code>
&lt;h1&gt;Especialistas&amp;nbsp;&lt;wbr&gt;em&amp;nbsp;LSF&lt;br&gt;constução&amp;nbsp;&lt;wbr&gt;em&lt;wbr&gt;aço&amp;nbsp;leve&lt;/h1&gt;
</code>
</pre>
</h4>
<ul>

<li><b>(non-breaking space):<pre><code>&amp;nbsp;</code></pre></b> Creates a space between words while conecting them in a steam that can not be broken</li>

<li><b>(word break opportunity): <pre><code>&lt;wbr&gt;</code></pre></b> This tag indicates to the browser a suitable place to insert a break between words if a line needs to be wrapped.  The browser will insert a break at the <wbr> tag. It's like saying to the browser, "If you need to wrap this line, here's a good place to do it."</li>

</ul>

CSS

body {
  font-family: sans-serif;

}
li {margin: 20px;}
h1 {
  font-size: 50px;
  color: red;
  letter-spacing: -2px;
  line-height: 1;
}