文本没有包装在表格布局中，溢出

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宽度是＆＃39; 41.5625％;＆＃39;考虑到填充。但我认为表格单元会自行考虑这一点，因此我将宽度设置为实际宽度。似乎在其他一切工作，禁止IE8！

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

Answer 1

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

那应该做你想要的。

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