自动换行属性不起作用

Question

我目前正在开设一个网站，在类似谷歌的图片库中显示厕所涂鸦的图片。每张图片都有一个覆盖图，显示涂鸦的转录。问题是覆盖层内的文本根本不会破坏。文本只会水平扩展，尽管它的元素是内联块并且设置了word-break属性。

为了澄清标记，这是一个截图：

这是一个抽象：

<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>

这里是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;
}

叠加层及其中的文本动态添加到DOM中，span.transcription的宽度和最大宽度也设置为特定宽度。

Answer 1

尝试删除空格：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;
}

Answer 2

尝试此操作并检查结果，您应该更改为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/