在带有文本溢出省略号的行后面放置图标

Question

我有文本溢出问题:省略号.我想在3个点后放置一个图标,但图标总是出现在下一行(因为display:block属性).有没有办法像这样显示这条线？

我的例子是小提琴和css:

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

Answer 1

您可以inline-block改为使用并将图标设置为position: absolute，以便始终将其放在最后一个span结束的位置。

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

.fa {
  position: absolute;
}

见这里：https : //jsfiddle.net/27rov6qn/1/