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

Question

我有一个使用display: flexbox; 将内容居中的布局，除此之外。由于 IE9 及以下版本不支持此功能，因此我使用了 display: table; 方法，而 几乎 是一种享受。

我遇到的问题是在 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%;
}

原始的 figcaption 宽度是 '41.5625%;'，考虑到填充。但我认为 table-cell 自己考虑到了这一点，所以我将宽度设置为 actual 宽度。似乎适用于其他一切，禁止 IE8！

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

Answer 1

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

这应该可以满足您的需求。

仅供参考，除了指定的之外，还有其他方法可以将文本包含在其父元素中。