Word wrap property not working

Question

I'm currently working on a site which displays pictures of toilet graffiti in a Google-like image gallery. Every picture has an overlay which displays the transcription of the graffiti. The problem is that the text inside the overlays won't break at all. The text will only expand horizontally although its element is an inline-block and has the word-break property set.

To clarify the markup, here is a screenshot:

And here is an abstraction:

<div class="jg-image">
    <div class="women"></div> <!-- colored overlay-->
    <div class="transcription-container">
        <div>
            <span class="transcription">Text goes here...</span>
        </div>
    </div>
>/div>

And here the CSS:

.transcription-container{
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;

    div{
        display: table-cell;
        position: relative;
        vertical-align: middle;
        width: inherit;
    }
}

span.transcription{
    display: inline-block;
    position: relative;
    width: inherit;
    max-width: inherit;
    height: auto;
    padding: 4px;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: break-word;
    /*text-overflow: ellipsis;*/
    line-height: 1.618rem;
}

The overlay and the text inside it is dynamically added to the DOM and the width and max-width of the span.transcription is also set to a specific width.

Answer 1

try this and check result,you shoud change towhite-space:normal

span.transcription{
    display: inline-block;
    position: relative;
    width: inherit;
    max-width: inherit;
    height: auto;
    padding: 4px;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    /*text-overflow: ellipsis;*/
    line-height: 1.618rem;
}

for reading more: http://css-tricks.com/almanac/properties/w/whitespace/

Answer 2

try to Remove white-space: nowrap;

span.transcription{
    display: inline-block;
    position: relative;
    width: inherit;
    max-width: inherit;
    height: auto;
    padding: 4px;
    overflow: hidden;
    /*white-space: nowrap;*/
    word-wrap: break-word;
    /*text-overflow: ellipsis;*/
    line-height: 1.618rem;
}