在文本溢出省略号后面放置图标

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

我的例子fiddle和CSS：

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

来源

2016-01-27 gkatai

你可以使用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/

来源

2016-01-27 16:45:18 Antiga

总结这一切在另一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>

来源

2016-01-27 16:47:12

在文本溢出省略号后面放置图标

回答

相关问题