... at the end of different text blocks?

Question

I have several paragraphs that contain different text blocks.

I set a max-height to my text blocks so that they have all the same height (The remaining text is hidden).

I also added "..." at the end of my text blocks. But I would like these three points to be placed immediately after the text, not far away. Is there a way?

I made a jsfiddle with two blocks of text to demonstrate my problem: 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 */
}

Maybe this can help you http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines — cakan, Oct 29 '15 at 13:45

Daniel Beck · Answer 1 · 2015-10-29T13:54:31.197

2

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

...and then you can remove the .ellipsis <span> and css.

(Per comments below: this answer is insufficient for the case where you use overflow:hidden to truncate the text. Given that requirement, I think your only real options are to use the not-yet-widely-supported text-overflow:ellipsis, or truncate the text either before it reaches the DOM or using javascript after the fact.)

edited Oct 29 '15 at 13:54

answered Oct 29 '15 at 13:44

Daniel Beck

20,653
5
38
53

I initially thought of something along this line but this won't work in the second example provided by the OP where the text is cut off. The span is positioned absolutely which is the problem. – Hidden Hobbes Oct 29 '15 at 13:47
I believe this would work for block of text that have a height lower than the height of my div... but will it work for block of text that have a higher height??? ... Best way to know it, I'll try :) (sorry for my english) – Véronique Oct 29 '15 at 13:48
Ah, you're quite right, I missed that detail. Apologies, this doesn't work for your use case. – Daniel Beck Oct 29 '15 at 13:49
@DanielBeck *three dots* `"..."` are not a Hellip `…` or `…`. Should be `content: "\2026";` to get the *real* `"…"` – Roko C. Buljan Oct 29 '15 at 14:16

imGaurav · Answer 2 · 2015-10-29T13:48:38.003

0

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

edited Oct 29 '15 at 13:48

answered Oct 29 '15 at 13:41

imGaurav

1,043
7
14

@Véronique use http://plugins.jquery.com/ellipsis/ to be able to support ellipsis in every browser. – sudo_dudo Oct 29 '15 at 13:46
This has the unfortunate drawback that it will only work on one line. – Hidden Hobbes Oct 29 '15 at 13:49
2

@ imGaurav, that was my first try. But does not work with Firefox and Explorer – Véronique Oct 29 '15 at 13:53
1

@imGaurav the problem is much more complicated than simply adding ellipsis on the 1. line. Text can wrap into more lines but the trick is how to keep Ellip at the end of the last line text. – Roko C. Buljan Oct 29 '15 at 13:55

... at the end of different text blocks?

2 Answers2