css - 另一种停止文本环绕图像的方法不是使用溢出 : hidden

Question

我正在使用媒体查询 @480，但是无法让文本停止环绕图像。溢出:隐藏/自动有效，但是这会影响图像中的文本/标题，即切断一些文本。

任何人都可以帮助/建议回复:基于以下代码实现此目标的另一种方法:

前端

<div class="outer">
    <figure class="img1 embed news">
        <img src="Images/windscreen.jpg" alt="Windscreen">
        <figcaption>A fifth of people use a bank card to scrape their car's windscreen.</figcaption>
    </figure>
</div>
<p>Many people in the UK rely on bank cards to allow them to take out money from their bank account. However, it seems a large number of people are abusing their card, which means that they risk damaging them, as well as misplacing them.</p>

CSS

.outer {
      display: block;
      text-align: left;
      max-width: 300px;
      margin-left: auto;
      margin-right: auto; 
    }

    figure.embed,
    figure.embed-top,
    figure.overlay,
    figure.embed-over {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0em;
        font-size: 0.8em;
        background: white;
        width: 100%;
    }

    figure.embed img,
    figure.embed-top img,
    figure.overlay img,
    figure.embed-over img {
        margin-left: auto;
        margin-right: auto;
    }

    figure.embed figcaption,
    figure.embed-top figcaption,
    figure.overlay figcaption,
    figure.embed-over figcaption {
        width: 100%;
        padding: 0.5em;
        /* neutral theme */
        color: rgba(50,50,50,1.0);
        background: rgba(200,200,200,0.825);
    }

提前致谢!

Answer 1

您可能想在 CSS3 中使用 word-wrap 标签。引用这个link