2015-02-09 8 views
0

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

在此先感謝:達到這一基於下面的代碼另一種方式!

回答

0

您可能想要在CSS3中使用word-wrap標記。參考link