Can text overflow be used: ellipsis in multiline text?

Question

I have p -tag with specific width and height . I want to use text-overflow:ellipsis to get ... if the text in the tag is too long. Is this possible to solve with css for multi-line text?

Answer 1

Googling does not reveal anything even remotely promising, so I'm going to say that this is impossible.

I found text-overflow: -o-ellipsis-lastline , but it only works in Opera : http://people.opera.com/dstorey/text/text-overflow.html (mirror: http://jsbin.com/ exugux / )

There is also a similar solution for WebKit: http://dropshado.ws/post/1015351370/webkit-line-clamp

Answer 2

You can do this with css. It works only in webkit browsers, but has a reserve for others.

use:

 display: -webkit-box; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ 

together with:

 max-width: $maxwidth; overflow: hidden; text-overflow: ellipsis; 

Here is the fiddle: demo

Answer 3

I publish this because I find that my solution is less complicated than the popular one, which uses pseudo-elements and float behavior. I recently had to create a solution that will work in IE7, so pseudo-elements were not an option in the first place.

The method includes 4 elements:

• Block level container that defines the maximum height of the content
• Built-in wrapper for text content
• Ellipse contained within an embedded shell
• The "fill" element is also inside the inline shell, which overlaps the ellipsis when the text content does not exceed the size of the container.

As in previous solutions only for CSS, the technique requires a solid colored background or background image with a fixed position for the content: the ellipsis should hide parts of the text, and the fill should hide the ellipsis. You can make a spectacular gradient effect so that the text disappears into ellipsis, but I will leave this cosmetic detail to my discretion.

HTML structure

 <!-- The block level container. `clamped-2` for 2 lines height --> <p class="clamped clamped-2"> <!-- The inline wrapper --> <span class="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <!-- The ellipsis, which can contain anything you want - (a 'more' link, for example) --> <span class="ellipsis"> &#133; </span> <!-- The fill, which covers the ellipsis when the text doesn't overflow --> <span class="fill"></span> </span> </p> 

CSS

 body { /* We need a solid background or background-position: fixed */ background: #fff; /* You'll need to know the line height to clamp on line breaks */ line-height: 1.5; } .clamped { overflow: hidden; position: relative; } /* Clamp to 2 lines, ie line-height x 2: Obviously any number of these classes can be written as needed */ .clamped-2 { max-height: 3em; } /* The ellipsis is always at the bottom right of the container, but when the text doesn't reach the bottom right... */ .clamped .ellipsis { background: #fff; bottom: 0; position: absolute; right: 0; } /* ...It obscured by the fill, which is positioned at the bottom right of the text, and occupies any remaining space. */ .clamped .fill { background: #fff; height: 100%; position: absolute; width: 100%; } 

Here's a fiddle demonstrating this : resize the browser or resize the text to see that it is shifting from ellipsis to non-ellipsis.

In addition to the arbitrary elegance factor, I believe that this is more productive than the popular solution, because it does not rely on floats (which require a lot of repainting) - absolute positioning is much easier to calculate, dependencies when calculating the layout.

Answer 4

I wrote a javascript function to fix a multi-line ellipsis problem

 function ellipsizeTextBox(id) { var el = document.getElementById(id); var keep = el.innerHTML; while(el.scrollHeight > el.offsetHeight) { el.innerHTML = keep; el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1); keep = el.innerHTML; el.innerHTML = el.innerHTML + "..."; } } 

hope this helps!

Answer 5

The user1152475 function has been changed , so it works word by word (space), and not character by character.

 function ellipsizeTextBox(id) { var el = document.getElementById(id); var wordArray = el.innerHTML.split(' '); while(el.scrollHeight > el.offsetHeight) { wordArray.pop(); el.innerHTML = wordArray.join(' ') + '...'; } } 

Note. For both solutions, the window should have a set height.

Answer 6

HTML does not offer such a feature, and it is very frustrating.

That is why I developed a small library to solve this problem. The library provides objects for modeling and performing text rendering at the letter level. This should do only what you need:

Read more about http://www.samuelrossille.com/home/jstext for a screenshot, tutorial, and dowload link.

Answer 7

As stated earlier, there is a strange way to do this using the webkit-box hosted by David DeSandro:

  elements_to_style { display: -webkit-box; overflow : hidden; text-overflow: ellipsis -webkit-line-clamp: number_of_lines_you_want; -webkit-box-orient: vertical; } 

link http://dropshado.ws/post/1015351370/webkit-line-clamp

Answer 8

just in case someone reaches here, maybe this solution is for you? pure css browser. http://codepen.io/issactomatotan/pen/LkJbjO

 <div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;"> <p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p> 

Answer 9

I found a solution for multi-line cross-browser pure CSS ellipse. I tried many solutions, and only this one was developed using CSS only. I had a div with dynamic width and had to set the height.

Here's the link: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Answer 10

I took advantage of most of these solutions, and the best thing is to use the solid clamp.js plugin. It works in all environments and has a minimum size (3K).

Answer 11

Hey, you can do it like this using css.

For Chrome and Safari

 .block-with-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 

For Firefox and Internet Explorer

 * styles for '...' */ .block-with-text { /* hide text if it more than N lines */ overflow: hidden; /* for set '...' in absolute position */ position: relative; /* use this value to count block height */ line-height: 1.2em; /* max-height = line-height (1.2) * lines max number (3) */ max-height: 3.6em; /* fix problem when last visible word doesn't adjoin right side */ text-align: justify; /* place for '...' */ margin-right: -1em; padding-right: 1em; } /* create the ... */ .block-with-text:before { /* points in the end */ content: '...'; /* absolute position */ position: absolute; /* set position to right bottom corner of block */ right: 0; bottom: 0; } /* hide ... if we have text, which is less than or equal to max lines */ .block-with-text:after { /* points in the end */ content: ''; /* absolute position */ position: absolute; /* set position to right bottom corner of text */ right: 0; /* set width and height */ width: 1em; height: 1em; margin-top: 0.2em; /* bg color = bg color under block */ background: white; } 

Answer 12

 .minHeightg{ height:5.6rem !important; width:20%; } .productOverflow { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 16px; /* fallback */ max-height: 3.6rem; /* fallback */ -webkit-line-clamp: 3; /* number of lines to show */ -webkit-box-orient: vertical; } /*firefox*/ @-moz-document url-prefix() { .productOverflow { overflow: hidden; text-overflow:ellipsis; display: -moz-box !important; line-height: 16px; /* fallback */ max-height: 3.6rem; /* fallback */ -moz-line-clamp: 3; /* number of lines to show */ -moz-box-orient: vertical; } 

 <div class="minHeightg"> <p class="productOverflow">Some quick example text to build on the card title .</p> </div>