画像の周りに反応的なテキストを折り返す

Question

画像を囲むテキストが必要です（200ピクセル×200ピクセル）。側面に折り返されたテキストの一部が狭くなるまでテキストが必要です。

これは私が何を意味するかです：

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>