html - 我如何手动选择换行符，并让 CSS 使包含的 div 足够宽以容纳它们？

Question

我想制作一个可以向左浮动的盒子，其中包含带有标题的图形。我想让标题文本围绕图像流动，并且我想明确选择换行符 - 最长线的长度应确定框的宽度。

以下几乎有效，除了包含“AReallyLongWordIsHere”的行 - 不是直接出现在上一行下方，而是出现在图像的右侧 - 出现在图像下方。我相信发生这种情况是因为 img 的宽度 - 加上第一行的宽度 - 决定了框的宽度，并且后续行相应地被打破。有没有办法指定框应该与最长的线一样长？

<div id="a">
  <img src="blah"></img>
  Line one<br/>
  AReallyLongWordIsHere<br/>
  Another line<br/>
</div>

#a {
  float: left;
}

#a img {
  float:  left;
}

Answer 1

您可以将文本包装在 p 标记中并使用 display: table; 和 display: table-cell;

#a {
  display: table;
  border: 1px solid black;
}

#a img, #a p {
  display: table-cell;
  vertical-align: top;
}

<div id="a">
  <img src="http://placehold.it/350x150">
  <p>Line one <br>
  AReallyLongWordIsHere <br>
  Another line <br></p>
</div>

或者您可以只使用 display: inline-flex:

#a {
  border: 1px solid black;
  display: inline-flex;
}

<div id="a">
  <img src="http://placehold.it/350x150">
  Line one <br>
  AReallyLongWordIsHere <br>
  Another line <br>
</div>