在文本溢出省略號後面放置圖標

我遇到了文本溢出問題：省略號。我想在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

在文本溢出省略號後面放置圖標

回答

相關問題