How to gracefully break text in Firefox?

Question

So I have this text that needs to break if it gets too long: If there's a hyphen or space in the word it should break on that. Is there a css style that makes this happen?

The closest I've gotten is by using word-wrap:break-word, which works in Chrome, but not Firefox. This is what it looks like in FF:

Here's other things I've tried:

Max-Width - this has worked for me in the past, but it's having no affect.

Here's how it should look, as it does in my code on fiddle or Chrome, it breaks on the hyphen:

Here's the code in fiddle:

<style>
    .landing-sem-left, .landing-seo-left, .specials-top-left {
        max-width: 460px;
        padding-right: 30px;
    }
    .landing-sem-left, .landing-sem-middle, .landing-seo-left, .landing-seo-middle, .specials-top-left, .specials-top-middle {
        padding-bottom: 23px;
    }
    .landing-sem-left, .landing-sem-right, .landing-sem-middle, .landing-seo-left, .landing-seo-right, .landing-seo-middle, .specials-top-left, .specials-top-right, .specials-top-middle {
        border: 0 none;
        float: left;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }
    #view-specials .heading-holder, #view-browse .heading-holder {
        margin-bottom: 18px;
        padding-right: 0 !important;
    }
    .block, .heading-holder {
        display: block;
        max-width: 461px;
        overflow: hidden;
        padding: 0 30px 0 0;
    }

    #view-specials .heading-holder, #view-browse .heading-holder {
        margin-bottom: 18px;
        padding-right: 0 !important;
        width: 100% !important;
        word-wrap: break-word;
    }
    .block, .heading-holder {
        clear: both;
        display: block;
        float: left;
        max-width: 461px;
        overflow: hidden;
        padding: 0 30px 0 0;
    }

    #landing-sem-container .h1-size1, #landing-seo-container .h1-size1 {
        font-size: 30px !important;
    }
    .heading-holder .h1-size1 {
        color: #003D77;
        font-size: 30px;
        line-height: 30px;
    }
    .heading-holder h1 span {
        border: 0 none;
        display: block;
        font-family: Helvetica,Arial,sans-serif;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    .heading-holder h1 span {
        color: #008CC1;
        display: block;
        font-size: 36px;
        line-height: 38px;
        margin: 0 0 -10px;
    }
    #landing-sem-container .h1-size3, #landing-seo-container .h1-size3, #specials-top-container .h1-size3 {
        font-size: 60px !important;
        line-height: 72px !important;
        max-width: 461px;
        width: auto;
    }
    .heading-holder .h1-size3 {
        color: #008CC1;
        font-size: 54px;
        letter-spacing: -1px;
        line-height: 50px;
    }
    .heading-holder h1 span {
        display: block;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
</style>
<div class="landing-seo-left">

<div class="heading-holder">
    <h1>
        <span class="h1-size1">PRE-OWNED</span>
        <span class="h1-size3">
            Mercedes-Benz

        </span>

    </h1>
</div>

<div class="landing-seo-content">
    <p>

        Auto Lenders is a no-haggle, pre-owned car dealership with <a class="blue-bold-link" href="/store-locator/">5 New Jersey locations</a>. Browse our entire used Mercedes inventory below.
    </p>
</div>
<div class="landing-seo-content-smaller">
    <p>
        Our <a class="blue-bold-link" href="#">Mercedes  inventory</a> is updated often. If you don't see what you're looking for, call <strong>888-305-5968</strong> or hit ‘Subscribe to Search’ below to be notified when new matches arrive. 
    </p>
</div>

</div>

I'm not concerned with IE.

Answer 1

In CSS, white-space: normal means that a string can be broken at any space character. But this is normally not needed, as it is the default. However, some special characters around a space may prevent normal wrapping in some browsers; it’s really a mess.

For a hyphen, there is nothing similar, but there are various other techniques. In fact, reasonably modern versions of Firefox treat a hyphen as allowing a line break after it, but only if there is a sufficient amount of letters on either side of it – and in the case of “Mercedes-Benz”, the amount of letters after the hyphen is not quite sufficient.

Probably the safest technique is to use CSS to add a ZERO-WIDTH SPACE after the hyphen. It acts as an invisible line breaking hint. The character causes some problems in old versions of IE, but they are so old that the CSS technique is safe (they ignore the CSS rule). This means that you would need markup like

<a class=part>Mercedes-</a>Benz

and CSS like

.part:after { content: "\200B"; }

Using span rather than a would be better in general, but the CSS in your fiddle would then cause some undesired side effects. You should probably tune those rules so that you can use span here. You could make the span contain just the hyphen if you like, but then it would be better to invent a better class name.

Do not use word-wrap:break-word, because it literally breaks words, instead of proper word division.

Answer 2

1) You have to not only constrain the max-width but also to define the width for your .heading-holder to 100% to tell the browser to reserve this area for this element only. Otherwise the textblock below will begin to flow in the logo-free areas.

.block, .heading-holder {
  display: block;
  max-width: 461px;
  width:100%; /*<-- tell browser to require all the space for this element*/
  overflow: hidden;
  padding: 0 30px 0 0;
}

2) Then it's easy to implement a work around by splitting the logo sub-words with a div container set to display:inline-block. This will display the logo inline as long there is enough place for the element and breaks in two lines when there should be not enough place for it. Sorry for doing it the dirty inline style way but you've got the idea.:

<span class="h1-size3">
  Mercedes-<div style="display:inline-block;">Benz</div>            
</span>

Here's the working js-fiddle example

Answer 3

What you really need to be doing is looking at responsive text in CSS3. Check out this and the example of what happens when you resize the page. This is the best solution to your question.