Place icon after a line with text-overflow ellipsis

Question

I have a problem with text-overflow: ellipsis. I want to place an icon after the 3 dots, but the icon always appears on the next line (because of the display: block property). Is there any way to display the line like this?

My example fiddle and the css:

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

Answer 1

You could use inline-block instead and set the icon to position: absolute in order to always have it place where the last span ends.

.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

The problem with the above approaches is that when the text is shortened it leaves the icon at the end of the text span.

Setting a max-width here would add to the approaches mentioned above.

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