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

Question

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 1

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.

Answer 2

you are missing a few properties to make ellipsis work, you need to add to .text:
white-space: nowrap
width: (some value)
display: (inline-)block , because this is span(inline element)
overflow: hidden
remove duplicated classes with same properties, merging them.
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;
}
<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>
If you don't want a fixed width in your span .text then you can use flexbox (as #vsync already answered)
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
}
<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>