Making a very long word fit in responsive element?

Question

I'm using Twitter Bootstrap.

<div class="container">
    <div class="row-fluid">
        <h1>VeryLongWordHere</h1>
    </div>
</div>

JSfiddle

---

On mobile screens the text becomes unreadable; leaving me with two options:

1. Make the text size reduce when width gets to certain size (how do I do this BTW?)
2. Make the text go over >1 lines; e.g.: on each segment I specify with <span> tags

However I'm not sure how to do either...

Answer 1

I use this CSS in my solution to a similar problem:

word-wrap:break-word

This will force words to break if necessary to force them to fit.

Answer 2

For your first option, there are a number of jQuery plugins that dynamically resize text to fit the width of the parent element. Here are a few:

• FitText
• SlabText
• BigText

You could use any of these plugins to resize the text when the screen size is smaller than a certain breakpoint. Something like this:

if (jQuery(window).width()) < 600) {
   jQuery('h1').slabText();
}