CSS：ラップされたインライン要素の適切な幅を設定します

Question

2つのインライン要素、画像とアンカーがあります。私はドラッグバーに応じてアンカーのテキストを折り返したい。私の問題は、アンカー要素の下で画像が始まる次の行にテキストを続けさせたいということです。私はdisplay: inline-table;のルールを指定することでそれを達成できます。それは今、テキストの幅がドラッグバーで隠れてばかり、指定された幅を超えたことを除いて素晴らしい作品：

 
What I want:        What I get: 
         |           |     
         |           | 
|__| This is the anchor|     |__| This is the anchor|#### 
    element that needs|      element that needs|#### 
    to get wrapped. |      et wrapped.  |#### 
         |           | 
         |           | 

HTML：

<div class:"container"> 
    <img src='someIcon.png'> <a href="">This is the anchor element that 
    needs to get wrapped </a> 
</div> 

はCSS：

.container { 
    white-space: normal; 
    display: inline-table; 
    word-wrap: break-word; 
    word-break: break-all; 
} 

の場合私はdisplay: inline-table;を無効にします。

 
         |     
         | 
|__| This is the anchor| 
element that needs to g| 
et wrapped.   | 
         | 
         | 

これでわかるように、テキストは右に移動します。<img>

Answer 1

。

.container { 
 
    white-space: normal; 
 
    display: inline-flex; 
 
    word-wrap: break-word; 
 
    word-break: break-all; 
 
}

<div class="container"> 
 
    <img src='someIcon.png'> <a href="">This is the anchor element that needs to get wrapped </a> 
 
</div>

Answer 2

この問題が解決することを願っています。あなたがdisplay: inline-flexを使用していることを達成することができ、同じHTML構造を維持

.container > img { 
 
    float: left; 
 
} 
 

 
.container:after { 
 
    clear: both; 
 
    content: ''; 
 
    display: table; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/340x110"> <a href="#">This is the anchor element that 
 
    needs to get wrapped </a> 
 
</div>