响应文字环绕图像

Question

我需要文字环绕图像（200px乘200px），直到一侧的包裹文字的一部分变得太窄，此时我希望文字框进入图像下方。

这就是我的意思是：

when the screen is wide

when the screen is more narrow
这就是我想要的包裹停止。我不想文本的方式来包装它显示文本的瘦栈是这样的：

的Lorem
存有
是
只是
虚拟
文本
的
打印
的 和blah blah Lorem Ipsum简直就是虚拟文本的印刷和

请帮我:(

Answer 1

article { 
 
    margin: 20px; 
 
    font-family: verdana, sans serif; 
 
    font-size: 16px; 
 
} 
 
p { 
 
    margin-top: 20px; 
 
} 
 
.example-container { 
 
    clear: both; 
 
    margin-top: 40px; 
 
} 
 
.caption { 
 
    font-style: italic; 
 
    color: BlueViolet; 
 
    margin-top: 40px; 
 
} 
 
.caption-subhead { 
 
    font-style: normal; 
 
    font-weight: bold; 
 
} 
 
.image-example { 
 
    float: left; 
 
    background-color: #555555; 
 
    width: 300px; 
 
    height: 80px; 
 
    text-align:center; 
 
    color: #FFFFFF; 
 
    padding-top: 60px; 
 
    margin: 5px 20px 10px 0; 
 
} 
 
.hyphenate { 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
}

<article lang="en"> 
 
    
 

 
<div class="example-container"> 
 
    
 
    <div class="image-example">Image Example</div> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
 
</div> 
 

 
    
 
</article>