-
Notifications
You must be signed in to change notification settings - Fork 755
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.