Place icon after line with text overflow ellipse

Question

I have a text overflow problem: ellipsis. I want to put the icon after three dots, but the icon is always displayed on the next line (due to the display: block property). Is there any way to display this line?

My fiddle and css example :

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  width: 200px;
}

Answer 1

Instead, you can use inline-blockand set the icon to position: absoluteto always have a place where the last one ends span.

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 200px;
}

.fa {
  position: absolute;
}

See here: https://jsfiddle.net/27rov6qn/1/

Answer 2

span inline-block block

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 200px;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span>
  <span class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</span>

<i class="fa fa-home fa-fw"></i>

</span>

Hide result