vertical align text inside div with elipsis

Question

I have div with a span and a img inside. both the span and the image suppose to be vertical aligned.

<div class="container">
    <img src="test.png">
  <span class="inner">this line can be 2-3 line with ellipsis</span>
  </div>

.container {
  height: 72px;
  width: 250px;
}
.test {
  height: 64px;
  width:64px;
}

img need to be on the left and text right next to it. can't make it work!

Answer 1

You can make it works by with display: table-cell and vertical-align: middle properties :

.container {
  display: table;
}
.inner {
  height: 64px;
  width:64px;
  padding-left: 20px;
  display: inline-block;
}

.container img, .container .inner { display: table-cell; vertical-align: middle;}

Fiddle here

Answer 2

to vertical-align 2 elements side by side, they need to be displayed has an inline boxe.

or they need to act as table-cell , or be child of a flexbox.

Img won't take the display-table-cell; and display:flex can be tricky with img , let's use inline-block .

For the ellipsis , white-space , text-overflow and overflow are to be used together. here with inline-block , we also need to give a width .

 .container { height: 72px; width: 250px; text-align: center; } img { vertical-align: middle; } .test { height: 64px; width: 64px; } .inner { width: 180px; display: inline-block; white-space: pre; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }

 <div class="container"> <img src="http://dummyimage.com/64x64&text=test.png"> <span class="inner">this line can be 2-3 line with ellipsis</span> </div> <div class="container"> <img src="http://dummyimage.com/64x64&text=test.png"> <span class="inner">this line can be 2-3 line with ellipsis this line can be 2nd line with ellipsis</span> </div> <div class="container"> <img src="http://dummyimage.com/64x64&text=test.png"> <span class="inner">this line can be 2-3 line with ellipsis this line can be 2nd line with ellipsis this line can be the third line with ellipsis</span> </div>

To activate ellipsis on few lines, you need to use white-space:pre; or a <pre> tag and do the line break within the HTML code. text-overflow:ellipsis; is usually used on a single line and will not be avalaible within a wrapping text and just showing at the bottom ot a boxe .

Answer 3

This can work by using the float property

<div class="container">
    <img src="test.png">
  <span class="inner">this line can be 2-3 line with ellipsis</span>
  </div>
.container {
  height: 72px;
  width: 250px;
}
.container img{
  float:left;
}
.inner {
  height: 64px;
  width:64px;
  float:left;
  padding-left:10px;
}

JsFiddle

Answer 4

Try this one, It works for me. This is definitely work for you, we have to use css property 1. -webkit-line-clamp and 2. -webkit-box-orient

 .container { width: 300px; border: 1px solid #e7e7e7; border-radius: 4px; padding: 1rem; } .text-truncate-vertical { text-align: left; display: -webkit-box; -webkit-line-clamp: 4; /*define how many line you want to show */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

 <div class="container"> <p class="text-truncate-vertical">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p> </div>