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

Question

我遇到文本溢出问题：省略号。我想在3个点后放置一个图标，但图标总是出现在下一行（因为display：block属性）。有没有办法像这样显示这条线？

我的示例fiddle和css：

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

Answer 1

您可以改为使用package main import "fmt" func main() { tmp_str := "hello %s" str := fmt.Sprintf(tmp_str, "world") fmt.Println(str) } 并将图标设置为inline-block，以便始终将其放置在最后position: absolute结束的位置。

span

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

Answer 2

上述方法的问题在于，当缩短文本时，它会在文本范围的末尾留下图标。

在此设置最大宽度会增加上述方法。

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

Answer 3

将其全部包裹在另一个span中并使用inline-block代替block

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;