This question already has an answer here:
I am trying to use CSS text-overflow: ellipsis property on a HTML div having dynamic height. JS fiddle link is https://jsfiddle.net/GS2306/bj8jg6nc/1/
#first { max-height: 310px; width: 300px; border: 1px solid red; } .one { max-height: 150px; width: inherit; border: 1px solid blue; font-size: 40px; overflow: hidden; text-overflow: ellipsis; min-height: 100px; white-space: nowrap; } .two { height: 100px; width: inherit; border: 1px solid green; }
I am not able to see the full text occupying the available space.
But when I remove the "white-space: nowrap" property from the div with class "one", I can see the text occupying the available space. https://jsfiddle.net/GS2306/bj8jg6nc/2/
How to make the text occupy the maximum width of 150 px in this case and show the overflowed text as ellipsis for the remaining part
You might consider using display: -webkit-box and having line-clamp: <num> will be a fix. You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 3em 2em; font-family: 'Open Sans', Arial, sans-serif; color: #cf6824; background: #f7f5eb; } h2 { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 400px; height: 109.2px; /* Fallback for non-webkit */ margin: 0 auto; font-size: 26px; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>
And with your markup.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 3em 2em; font-family: 'Open Sans', Arial, sans-serif; color: #cf6824; background: #f7f5eb; } .one { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 400px; height: 72.2px; /* Fallback for non-webkit */ margin: 0 auto; font-size: 26px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
<div id="first"> <div class="one">Using text-overflow is a difficult skill to master. Please help me with your comments</div> <div class="two"></div> </div>
Some references you might consider interesting:
