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

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

＆＃13;

＆＃13;

.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  */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

顺便说一句，您还可以为剪切的文本元素提供相同文本的title，当鼠标悬停时，用户可以阅读整个文本。

Answer 2

您缺少一些可让ellipsis工作的属性，您需要添加到.text：

• white-space: nowrap
• width: (some value)
• display: (inline-)block，因为这是span（内联元素）
• overflow: hidden

删除具有相同属性的重复类，合并它们。

＆＃13;

＆＃13;

img {
  height: 34px;
  width: 34px;
  margin-right: 12px;
  vertical-align: middle;
}
.container {
  max-width: 300px;
}
.text {
  white-space: nowrap;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您不想在您的范围width中找到固定的.text，那么您可以使用flexbox（因为@vsync已经回答）

＆＃13;

＆＃13;

img {
  height: 34px;
  width: 34px;
  vertical-align: middle;
}
.container {
  max-width: 300px;
  display: flex;
  border: red dotted
}
.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 12px;
  font-size: 18px;
  align-self: center
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;