html - 显示一个图像，一些用省略号修剪的文本，然后是一个图标

Question

我希望所有这些都在同一行，而不是多行。但是，当我尝试这样做时，我最终得到多行。你可以看看我的fiddle here

我为我的 CSS 尝试了这个:

.left-img {
  height: 34px;
  width: 34px;
  margin-right: 12px;
  vertical-align: middle;
}
.right-img {
  height: 34px;
  width: 34px;
  margin-right: 12px;
  vertical-align: middle;
}
.container {
  max-width: 300px;
}
.text {
  text-overflow: ellipsis;
  font-size: 18px;
}

<div class="container">
  <img src="https://c1.staticflickr.com/7/6217/6357645479_b6d8c2d367_z.jpg" class="left-img" />
  <span class="text">my Text that should wrap in elipses before the icon right?</span>
  <img src="http://rlv.zcache.co.nz/zoom_up_of_cat_face_large_square_tile-r9ff2bcd4ac1d49e9b01fc97b9d0993c6_agtbm_8byvr_50.jpg" class="right-img">
  </i>
</div>

但它不起作用。

我想让容器的宽度固定。我怎样才能完成这一切？

Answer 1

使用 flexbox 对此非常有用(产生比@dippas 的回答更好的结果):

Demo page

.left-img {
  height: 34px;
  width: 34px;
}

.right-img {
  height: 34px;
  width: 34px;
}

.container {
  max-width: 300px;
  display:flex; /*  <--- add this  */
  align-items: center;
  outline:1px dashed #CCC; /* can delete this */
}
 
.text {
  font-size: 18px; 
  padding: 0 12px;
   /* <--- add this  */
  text-overflow: ellipsis; /*  <--- add this  */
  white-space: nowrap; /*  <--- add this  */
  overflow: hidden; /*  <--- add this  */
}

<div class="container">
  <img src="https://c1.staticflickr.com/7/6217/6357645479_b6d8c2d367_z.jpg" class="left-img" />
  <span class="text">my Text that should wrap in elipses before the icon right?</span>
  <img src="http://rlv.zcache.co.nz/zoom_up_of_cat_face_large_square_tile-r9ff2bcd4ac1d49e9b01fc97b9d0993c6_agtbm_8byvr_50.jpg" class="right-img" />
</div>

顺便说一下，你也可以给被剪切的文本元素一个title，当鼠标悬停在它上面时，用户可以阅读整个文本。