Question

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

使用display: inline-flex维护相同的HTML结构。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我希望这能解决问题。

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

CSS：无法设置包裹内联元素的适当宽度

2 个答案: