Add three dots in a multiline span

Question

I found this question here on SO and the solution is pretty simple:

html:

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>

css:

span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

And it works like expected, it prints: Lorem Ipsum is simply du...

Now, the same thing I would like to, but keep failing, create on the following example:

jsfiddle: http://jsfiddle.net/9HRQq/

html:

<div class="textContainer">                
    <img src="#" class="image" alt="the_image">
    <span class="text">"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.</span>
</div>

css:

.textContainer{
    width: 430px;
    float: left;
    margin-top: 10px;
    border: 1px solid black;                
}

.text {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #047F04;
    display: block;
    white-space: normal;
    overflow: hidden !important;
    text-overflow: ellipsis;
    height: 99px;
}

.image {
    float: right;
    position: absolute;
    top: 85px;
    right: 10px;
    width: 108px;
    height: 42px;
}

Can you please tell me how could I achieve to put ... on the end of the string in my example?

you shouldn't need the `!important`. (if you do need it, then there's likely to be something wrong elsewhere in your stylesheets) — Spudley, Aug 03 '12 at 20:21

score 21 · Accepted Answer · edited May 23 '17 at 11:45

21

The specification for the text-overflow property says that this is not possible for multiline text:

This property specifies rendering when inline content overflows its block container element ("the block") in its inline progression direction that has ‘overflow’ other than ‘visible’. Text can overflow for example when it is prevented from wrapping (e.g. due to ‘white-space:nowrap’ or a single word is too long to fit).

In other words, only works on single line text blocks.

source: http://dev.w3.org/csswg/css3-ui/#text-overflow

EDIT This fiddle has a workaround using jquery: http://jsfiddle.net/k5VET/ (source: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?)

edited May 23 '17 at 11:45

Community

1
1

answered Aug 03 '12 at 20:01

Marcelo De Zen

9,439
3
37
50

2

I too came across this after searching again. Others have attempted this, but have ended up using jQuery. – WebDevNewbie Aug 03 '12 at 20:02
@devundef: yes, actually I can, and I don't know why I didn't think of this before. Thanx! Now, as I googled I see there are also (OFC) plugins to do this kind of stuff with jQuery like for example: http://dotdotdot.frebsite.nl/ – Nikola Aug 03 '12 at 20:29

score 2 · Answer 2 · answered Dec 07 '16 at 09:48

span{
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* no of lines */
    text-overflow: ellipsis;
    overflow:hidden !important;
    width:180px;
}

above CSS property 'll put three dots...
eg:

Lorem Ipsum is simply dummy
text of the printing and
typesetting industry. Lorem...

score 1 · Answer 3 · answered Jan 02 '22 at 15:28

This is possible without js or jquery. just pure css.

similar to vijay's answer, but to add on, you need to set an extra field for -webkit-box-orient: vertical;

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* limit to 2 lines */
}

score 0 · Answer 4 · edited Aug 03 '12 at 19:57

0

add width: 200px; and white-space: nowrap; to your .text css block. With no width set, the text just expands and fills in.

edited Aug 03 '12 at 19:57

John Conde

217,595
99
455
496

answered Aug 03 '12 at 19:55

WebDevNewbie

1,833
1
13
17

2

`white-space: nowrap;` will cause the contents not to span multiple lines. I think the OP's question is about maintaining multiple lines while still having the ellipsis automatically generated at the end, if the content has been clipped. – Jon Newmuis Aug 03 '12 at 19:57
Ah, I guess I didn't get that part of it, Thank you. – WebDevNewbie Aug 03 '12 at 20:00

Add three dots in a multiline span

4 Answers4

Linked