text-overflow: ellipsis property of CSS not working properly

Question

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

Do you wanna use multiline and also ellipsis? – Praveen Kumar Purushothaman Jun 26 '15 at 19:16 — Praveen Kumar Purushothaman, Jun 26 '15 at 19:16
@Cayce K. I am using Google Chrome – gauravs Jun 26 '15 at 19:19 — gauravs, Jun 26 '15 at 19:19
@PraveenKumar Yes. I want to use both – gauravs Jun 26 '15 at 19:19 — gauravs, Jun 26 '15 at 19:19
Have you checked to see if it looks right on Firefox? – Cayce K Jun 26 '15 at 19:19 — Cayce K, Jun 26 '15 at 19:19
@CayceK Yes I checked now. It is not working there too. – gauravs Jun 26 '15 at 19:24 — gauravs, Jun 26 '15 at 19:24
@gauravs Check my answer? – Praveen Kumar Purushothaman Jun 26 '15 at 19:25 — Praveen Kumar Purushothaman, Jun 26 '15 at 19:25

Praveen Kumar Purushothaman · Answer 1 · 2015-06-26T19:27:15.253

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:

I'm not sure answers that dump a bunch of code in with no explanation or even highlighting of the changes are very good, we'd be quick to tear into a question that did that - it just encourages a cut and paste solution rather than understanding a problem — Toni Leigh, Jun 26 '15 at 19:26

text-overflow: ellipsis property of CSS not working properly

1 Answers1

Linked