自动换行属性不起作用答案

【问题标题】：Word wrap property not working自动换行属性不起作用
【发布时间】：2014-03-24 00:10:12
【问题描述】：

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

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

这是一个抽象：

<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 的宽度和最大宽度也设置为特定宽度。

【问题讨论】：

您可以指定文本的宽度，它会自动打破这些文本。

标签： css html word-wrap

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：