html - 文本不换行在表格布局中，溢出

Question

我有一个使用 display: flexbox; 来居中内容等的布局。由于 IE9 及更低版本不支持此功能，因此我使用了 display: table; 方法来代替 almost 效果很好。

我遇到的问题是在 IE8 中(是的，我知道，但我必须这样做)。出于某种原因，文本会脱离其容器，容器中设置了 display: table-call;。在使用这种方法之前我从未经历过这种情况，希望有人能提供帮助。这是发生的情况的屏幕截图。使用 img 和 figcaption 着色，这样您就可以更容易地看到宽度:

如您所见，文本超出了 figcaption。

这是代码的标记:

<figure>
    <figcaption>
        <h3>E-commerce + Retail</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </figcaption>
    <img src="img/content/ipad.png" alt="ALT TEXT." class="ipad" />
</figure>

还有 CSS:

figure {
    display: table;
    width: 100%;
}

figcaption,
.ipad {
    display: table-cell;
    vertical-align: middle;
}

.ipad {
    width: 48.4375%;
    max-width: 620px;
}

figcaption {
    padding: 0 8% 0 2%;
    width: 51.5625%;
}

考虑到填充，原始图形标题宽度为“41.5625%;”。但我认为表格单元格本身会考虑到这一点，所以我将宽度设置为实际宽度。似乎适用于其他一切，IE8 除外!

谢谢，真的希望有人能对这个烦人的小故障有所了解!

Answer 1

在 <figcaption>使用 word-wrap: break-word;

那应该做你想做的。

但仅供引用，除指定的方法外，还有其他方法可以将文本包含在其父元素中。