html - CSS:无法设置包装内联元素的适当宽度

Question

我有两个内联元素，一个图像和一个 anchor 。我希望 anchor 中的文本根据拖动条换行。我的问题是我希望文本在 anchor 元素下而不是图像下开始的下一行中继续。我可以通过指定 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

保持相同的 HTML 结构，您可以使用 display: inline-flex 实现。

.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>