Jonathan Allen Grant Jonathan Allen Grant - 5 months ago 11
HTML Question

Display an image, some text trimmed with ellipsis, and then an icon

I want to have all of these on the same line, not multiple lines. However, when I try to do this, I end up with multiple lines. You can check out my fiddle here

I tried this for my 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>





but its not working.

I want to have the container at a fixed width. How can I accomplish all of this?

Answer

Using flexbox is great for this (produces better result than @dippas's answer):

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>

By the way, you could also give the clipped text element a title with the same text, when the mouse hovers it, the user could read the whole text.