Skip to content

Wrapping lines with lettering('lines')

davatron5000 edited this page Mar 5, 2011 · 1 revision

Lettering can similarly help break up sentences mid-line. We struggled for a semantic way to do this, but then remembered <br> tag which a semantic way to say "break this line". Similar to the other methods where lines of text are broken up by either non-breaking spaces or individual letters, the .lettering('lines') method will create breakpoints at <br> tags:

<p class="line_split">Are you<br/> ready to<br/> RUMmMmMMBBLE!</p>

<script>
$(document).ready(function() {
  $(".line_split").lettering('lines');
});
</script>

Resulting code:

<p class="line_split">
  <span class="line1">Are you</span>
  <span class="line2">ready to</span>
  <span class="line3">RUMmMmMMBBLE!</span>
</p>

As expected it uses the .line# ordinal pattern. You'll also notice the <br>'s have been destructively ripped out. In your CSS, you'll want to declare something like .line_split span { display:block; } if you need them to behave as a <br> element.

Clone this wiki locally