pre-line!

so without, all text will ignore newlines between tags, however, it will add new-lines to text if there is not enough screen width for the whole line of text, so what what-space: pre-line; does it the usual when wrapping because of width, but also respects new lines between the tags.

by edwardsharp

HTML

<div id="font0" class="font"></div>
<br>
<div id="font1" class="font"></div>
<br>
<div id="font2" class="font"></div>
<br>
<div id="font3" class="font"></div>
<br>
<div id="font4" class="font"></div>
<br>
<div id="font5" class="font"></div>
<br>
<div id="font6" class="font"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Lobster|Merriweather+Sans|Permanent+Marker|Roboto+Mono|Shrikhand');
.font {
  font-size: 2em;
  line-height: 1em;
  white-space: pre-line;
}

#font0 {
  font-family: 'Roboto Mono', monospace;
}

#font1 {
  font-family: 'Lobster', cursive;
}

#font2 {
  font-family: 'Shrikhand', cursive;
}

#font3 {
  font-family: 'Merriweather Sans', sans-serif;
}

#font4 {
  font-family: 'Gloria Hallelujah', cursive;
}

#font5 {
  font-family: 'Permanent Marker', cursive;
}

#font6 {
  font-family: cursive;
}

JavaScript

/*
 *  ( •_•)>⌐■-■
 *  (⌐■_■)
 */

var txt = 'CUSTOM SCREEN PRINTING' + '&amp; PRE-PRESS SERVICES' + '5040 SE MILWAUKIE AVE.' + 'PORTLAND, OR 97202';

for (var i = 0; i < 7; i++) {
  var _elem = document.getElementById('font' + i);
  _elem.innerHTML = txt;
}