Two-line text overflow ellipsis

Question

I know that you can use a combination of CSS rules so that the text ends with an ellipsis (...) when the time is overflow (get out of parent bounds).

Is it possible (just to say no) to achieve the same effect, but let the text be wrapped in more than one line?

Here is a demo .

div { width: 300px; height: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

As you can see, the text ends with an ellipsis when it is wider than the width of the div. However, there is still enough space for the text to wrap the second line and continue. This is interrupted by white-space: nowrap , which is required for the ellipsis to work.

Any ideas?

PS: No JS solutions, pure CSS, if possible.

Answer 1

I'm not sure you saw THIS , but Chris Coyier excellent CSS-Tricks.com posted a link to this while back and it is a pure CSS solution that does exactly what you are looking for.

(Click to view in CodePen)

HTML:

 <div class="ellipsis"> <div> <p> Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people hats off – then, I account it high time to get to sea as soon as I can. </p> </div> </div> 

CSS

 html,body,p { margin: 0; padding: 0; font-family: sans-serif; } .ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content: ""; float: left; width: 5px; height: 200px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC); background: -webkit-gradient(linear,left top,right top, from(rgba(255,255,255,0)),to(white),color-stop(50%,white)); background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white); background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white); background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white); background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white); } + Af3iLcJSjZ1ivT0S / PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2 + F / nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl + 4yrDsYoVx + JYz7mXXNSp / a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO + 2ZdD9MFe56Y9z3LUG96mcX02n / CW71JH6Qmf8px / cw77ZvVzB + BCj8D5vxhn / vXZh6D4uzf1rN + Cc347j79q / zUL25TPrJMfG / 5LvuNZP8rixeZz / mf + vU + Vut + 5NL5gPOeb / sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8 / qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv html,body,p { margin: 0; padding: 0; font-family: sans-serif; } .ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content: ""; float: left; width: 5px; height: 200px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC); background: -webkit-gradient(linear,left top,right top, from(rgba(255,255,255,0)),to(white),color-stop(50%,white)); background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white); background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white); background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white); background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white); } 

Of course, being a pure CSS solution means that it is also quite complex, but it works cleanly and elegantly. I assume that Javascript is out of the question because it is much easier to achieve (and possibly more degradable) with Javascript.

As an added bonus, there is a downloadable zip file for the full process (if you want to understand it all), but also a SASS mixin file so you can put it frivolous into your process.

Hope this helps!

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Answer 2

Simple CSS properties can help. Below is a multipoint ellipsis.

 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; 

Answer 3

Have a look at this clean CSS version: http://codepen.io/martinwolf/pen/qlFdp

 display: -webkit-box; max-width: 400px; height: 109.2px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.625; 

Answer 4

The css below should do the trick.

After the second line, the text will contain ...

 line-height: 1em; max-height: 2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 

Answer 5

My solution reuses one from amcdnl, but my reserve consists of using height for a text container:

 .my-caption h4 { display: -webkit-box; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 40px;/* Fallback for non-webkit */ } 

Answer 6

Based on the answer I saw on stackoveflow, I created this LESS mixin ( use this link to generate CSS code ):

 .max-lines(@lines: 3; @line-height: 1.2) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lines; line-height: @line-height; max-height: @line-height * @lines; } 

Using

 .example-1 { .max-lines(); } .example-2 { .max-lines(3); } .example-3 { .max-lines(3, 1.5); } 

Answer 7

  text-overflow: ellipsis; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 36px; max-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 

I found combos of both lowercase and linear works: D

Answer 8

Here is a simple script for managing ellipsis using jQuery. It checks the actual height of the element and creates a hidden original node and a truncated node. When the user clicks, he switches between the two versions.

One of the big advantages is that the ellipsis is close to the last word, as expected.

If you use pure CSS solutions, the three dots seem distant from the last word.

 function manageShortMessages() { $('.myLongVerticalText').each(function () { if ($(this)[0].scrollHeight > $(this)[0].clientHeight) $(this).addClass('ellipsis short'); }); $('.myLongVerticalText.ellipsis').each(function () { var original = $(this).clone().addClass('original notruncation').removeClass('short').hide(); $(this).after(original); //debugger; var shortText = ''; shortText = $(this).html().trim().substring(0, 60) + '...'; $(this).html(shortText); }); $('.myLongVerticalText.ellipsis').click(function () { $(this).hide(); if ($(this).hasClass('original')) { $(this).parent().find('.short').show(); } else { $(this).parent().find('.original').show(); } }); } manageShortMessages(); 

 div { border:1px solid red; margin:10px; } div.myLongVerticalText { height:30px; width:450px; } div.myLongVerticalText.ellipsis { cursor:pointer; } div.myLongVerticalText.original { display:inline-block; height:inherit; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="myLongVerticalText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada. Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt. </div> <div class="myLongVerticalText"> One Line Lorem ipsum dolor sit amet. </div> </body> 

Answer 9

It seems more elegant to combine the two classes. You can remove a class from two-lines if you need to see only one line:

 .ellipse { white-space: nowrap; display:inline-block; overflow: hidden; text-overflow: ellipsis; } .two-lines { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; } .width{ width:100px; border:1px solid hotpink; } 

  <span class='width ellipse'> some texts some texts some texts some texts some texts some texts some texts </span> <span class='width ellipse two-lines'> some texts some texts some texts some texts some texts some texts some texts </span> 

Answer 10

This will work with Chrome, Safari, Edge, Opera and some other browsers. Demo - http://jsfiddle.net/z9raxqyp/

 div { width: 300px; line-height: 1.3em; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } 

Answer 11

Limiting to a few lines will work in almost all browsers, but an ellipsis (3 points) will not be displayed in Firefox and IE. Demo - http://jsfiddle.net/ahzo4b91/1/

 div { width: 300px; height: 2.8em; line-height: 1.4em; display: flex; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } 

Answer 12

In my corner application, the following style worked to achieve ellipsis when overflowing text on the second line :

  <div style="height:45px; overflow: hidden; position: relative;"> <span class=" block h6 font-semibold clear" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 20px; /* fallback */ max-height: 40px; /* fallback */ -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical;"> {{ event?.name}} </span> </div> 

Hope this helps someone.

Answer 13

This is a common hack, but it works:

http://jsfiddle.net/2wPNg/

 div { width: 30%; float: left; margin-right: 2%; height: 94px; overflow: hidden; position: relative; } div:after { display: block; content: '...'; width: 1em; height: 1.5em; background: #fff; position: absolute; bottom: -6px; right: 0; } 

It has a problem .... it might cut the letter awkwardly and it would probably have some weird results on a responsive site.

Answer 14

You don’t know what your goal is, but do you want the text to appear on the second line?

Here is your jsFiddle: http://jsfiddle.net/8kvWX/4/ just deleted the following:

  white-space:nowrap; 

I'm not sure if this is what you are looking for or not.

Hello,

Mee