Значок места после строки с эллипсисом переполнения текста

Question

У меня проблема с переполнением текста: многоточие. Я хочу поместить значок после трех точек, но значок всегда отображается на следующей строке (из-за свойства display: block). Есть ли способ отобразить эту строку?

Мой пример fiddle и 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/

Answer 2

Заверните все это в другом 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>