...在不同文本塊的結尾處？

我爲我的文本塊設置了最大高度，以使它們具有完全相同的高度（其餘文本隱藏）。

我還在文本塊的末尾添加了「...」。但我想這三點要放在之後，緊接文字，不遠處。有沒有辦法？

我做了一個的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 */ 
}

來源

2015-10-29 Véronique

也許這可以幫助你http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-多行 – cakan

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

來源

2015-10-29 13:41:47 imGaurav

我試過了，但是它在Explorer和Mozilla中無法使用....只能在Chrome中使用 –

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – Keith

@Véronique使用http://plugins.jquery.com/ellipsis/能夠在每個瀏覽器中支持省略號。 –

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

...然後你可以刪除.ellipsis <span>和CSS。

（每下面的註釋：這個答案是不夠的，你使用overflow:hidden截斷文本的情況下，考慮到需求，我認爲你的唯一真正的選擇是使用還未廣泛支持text-overflow:ellipsis，或截斷文字在它到達DOM之前或者事實之後使用javascript）

來源

2015-10-29 13:44:54

我最初想到了沿着這條線的東西，但這不會在OP所提供的第二個例子中的文本被切斷。跨度絕對定位，這是問題。 –

我相信這可以用於塊高度低於我的div高度的文本...但它會工作的文本塊有更高的高度？ ...最好的方式知道它，我會嘗試:)（對不起，我的英語） –

啊，你說得很對，我錯過了那個細節。道歉，這不適用於你的用例。 –

...在不同文本塊的結尾處？

回答

相關問題