除了使用溢出之外，另一种停止文本换行图像的方法：隐藏答案

【问题标题】：Another way of stopping text wrapping image than using overflow: hidden除了使用溢出之外，另一种停止文本换行图像的方法：隐藏
【发布时间】：2015-04-09 04:21:42
【问题描述】：

我正在使用媒体查询@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);
    }

提前致谢！

【问题讨论】：

标签： css image media-queries overflow word-wrap

【解决方案1】：

您可能希望在 CSS3 中使用 word-wrap 标签。参考这个link

【讨论】：