display: -webkit-box 导致文本环绕图片失效，并且保证文本只占用两行，超出显示省略号

`display: -webkit-box;` 是Webkit内核（如早期版本的Safari和Chrome）引入的一个CSS样式，它用于创建弹性布局，类似于Flexbox。当你将文本围绕着图片设置成 `-webkit-box` 属性时，可能会遇到预期之外的行为，因为 `-webkit-box` 更多地关注容器内的项目如何分配空间，而不是内容的排列方式。

如果你想要文本仅环绕图片显示，并且当文本超过两行时自动换行并显示省略号，应该使用 `display: flex` 或 `display: inline-flex` 以及相关的CSS属性：

.container {
  display: flex;
  align-items: center; /* 文本会居中对齐 */
  overflow-wrap: break-word; /* 如果文字太长会自动换行 */
  white-space: nowrap; /* 防止默认的换行 */
  text-overflow: ellipsis; /* 文字超出部分显示省略号 */
}

.text {
  flex: 1; /* 自适应宽度，如果图片宽度固定，可以让文本占据剩余空间 */
}

在这个例子中，`.container` 容器设置了 `flex` 布局，`.text` 子元素则可以容纳多行文本。如果文本超过了两行，就会按照设定的方式进行换行和省略。