在带有文本溢出省略号的行之后放置图标 [英] Place icon after a line with text-overflow ellipsis

问题描述

我对文本溢出有疑问:省略号.我想在3个点后放置一个图标，但是该图标总是出现在下一行(由于display:block属性).有什么办法可以显示这样的行?

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?

我的示例小提琴和CSS:

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

推荐答案

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

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;
}

请参阅此处: https://jsfiddle.net/27rov6qn/1/

这篇关于在带有文本溢出省略号的行之后放置图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！