Geek asks and answers

The wrap wrap property does not work

I am currently working on a site that displays photos of toilet graffiti in the Google Image Gallery. Each photo has an overlay that displays graffiti transcription. The problem is that the text inside the overlays will not break at all. The text will expand only horizontally, although its element is an inline block and has the word break property.

To clarify the markup, here is a screenshot:

markup screenshot

And here is the 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 is 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 are dynamically added to the DOM, and the width and maximum width of span.transcription are also set to a specific width.

+3
source share
2 answers

try this and check the result, you shoud change to white-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;
}

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

+2

: 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;
}
+3

More articles:


All Articles