Why does text overflow spans in twitter boostrap?

Question

http://www.responsinator.com/?url=http%3A%2F%2Ftoplessproductions.com%2Fyuv%2Fproblem%2Ftextoverflow.html

Notice that "Crappy Android portrait 240 x 320" makes the card's text overflow. Is there a canonical solution for this? I could decide on a min-width for the body , but that would just brush the problem underneath the rug.

Answer 1

You need to set a CSS media query to shrink to text on smaller browsers

@media (max-width: 480px) {
  h2 {
    font-size: 10px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Something like that will work for phones and h2s.

Answer 2

You can use word-wrap: break-word to ensure the text will not overflow:

@media (max-width: 480px) {
    h2 {
        word-wrap: line-break;
    }
}

I've also noted that you are loosing some width because of a wrong layout. You forgot the row element and you are overriding span4 positioning properties with the .main_link class. Background colors, extra padings, margins, etc. should not be applied at the same level as span# . The native well element fits the behaviour you are looking for.

So, to recover the full media width and fix your layout you can use a markup like this:

<div class="container">
    <div class="row">
        <div class="span4">
            <div class="well main_link">
                ...
            </div>
        </div>
    </div>
    ...
</div>