...在不同的文本块的末尾？

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

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

...然后你可以删除.ellipsis <span>和css。

（以下评论：对于您使用overflow:hidden截断文本的情况，此答案是不够的。鉴于此要求，我认为您唯一真正的选择是使用尚未广泛支持的{ {1}}，或在文本到达DOM之前或在事后使用javascript截断文本。）

Answer 2

使用text-overflow: ellipsis;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;