... в конце различных текстовых блоков?

Question

У меня есть несколько абзацев, содержащих разные текстовые блоки.

Я установил максимальную высоту для своих текстовых блоков, чтобы они имели одинаковую высоту (оставшийся текст скрыт).

Я также добавил «...» в конце моих текстовых блоков. Но я хотел бы, чтобы эти три очка были размещены сразу после текста, неподалеку. Есть ли способ?

Я сделал jsfiddle с двумя блоками текста, чтобы продемонстрировать мою проблему: JSFIDDLE

HTML

<div class="infosLivre"> 
<div class="descriptionLivre"> 
(1111 pages) Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium 
    <span class="ellipsis">...</span> 
</div> 

<div class="infosLivre"> 
<div class="descriptionLivre"> 
(1111 pages) Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimo nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos 
    <span class="ellipsis">...</span> 
</div> 

CSS

.infosLivre{ 
    font-size: 17px; 
    padding-left:15px; 
    width: 655px; 
}  
.descriptionLivre{  
    padding-top: 30px; 
    line-height: 1.3; 
    max-height: 90px; 
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    position:relative; 
    hyphens: auto; 
} 
.ellipsis{ 
    bottom: 2px; 
    position: absolute; 
    right: 0px; 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
} 

Answer 1

Использование text-overflow: ellipsis;

.ellipsis { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    
 
}

<p class="ellipsis">This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text</p>

Answer 2

.descriptionLivre:after { 
    content:"..."; 
} 

... а затем вы можете удалить .ellipsis <span> и CSS.

(Per комментариев ниже:. Этот ответ недостаточен для случая, когда вы используете overflow:hidden укоротить текст Учитывая это требование, я думаю, что только ваши реальные варианты использования пока еще не широко поддерживаются text-overflow:ellipsis или усечение текст до того, как он достигнет DOM или с помощью javascript после факта.)