Replace hidden overflow with “…”

Question

In javscript i created a function that puts text in a div. However, sometimes this text is too long for this div. So in css I set overflow to hidden.

overflow: hidden

I don't just want to not show this overflow, but i want to replace it with "..." in order that the user sees that the information is not complete.

I've already tried to count the length of the string, and stop it after a few characters, but as my div is really narrow, it doenst seem like a good solution.

How could i do this?

EDIT: i want to have mutiple lines, not one

HTML:

<div id="event">This is way too much text for this div, but i want to show it partly</div>

CSS:

#event{
   position: fixed; //doensn't have to do anything with the problem
   font-size: 8px; //idem
   width: 50px;
   line-height: 1em;
   overflow: hidden;
}

Let's say the div can display this text:

This is way too
much text for
this div, but

How can i add 3 dots after 'but' ?

Answer 1

I made a javascript function called hideOverflow which automatically hides the overflow and replaces it with an ellipsis.

function hideOverflow(element) {

  //Calculate lineHeight and maxLineCount for parent's height
  element.style.whiteSpace = 'nowrap';
  var parent = element.parentNode;
  var maxLineCount = Math.floor(parent.clientHeight / element.clientHeight);
  var maxLineHeight = element.clientHeight * maxLineCount;
  element.style.whiteSpace = 'normal';

  //Find and set maxLineHeight by replacing the overflow with an ellipses
  if (element.clientHeight > maxLineHeight) {
    var max = maxLineCount * element.style.lineHeight;
    for (var i = 0; element.clientHeight > maxLineHeight; i++) {
      element.innerHTML = element.textContent.slice(0, -2) + '…';
      i++;
      if (i === max) break;
    }
  }
}

hideOverflow(document.getElementById('foo'));

div {
      width: 300px;
      height: 100px;
      font-size: 18px;
      border: 1px black solid;
}

p {
  margin: 0px;
  padding: 0px;
}

<div>
  <p id="foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et magna at sem tristique lobortis quis et nulla. Sed porttitor massa ac efficitur viverra. Donec eu commodo justo. Suspendisse libero quam, tincidunt non faucibus et, vehicula vel orci. Praesent in enim at odio ullamcorper gravida nec auctor diam. Aenean et feugiat quam. Donec sem felis, tristique et euismod at, elementum eget nulla.</p>
</div>

This does not support margin or padding currently, but you could easily adjust the Calculate lineHeight and maxLineCount for parent's height section of the hideOverflow function in order to achieve this same result with padding and margin.

Hope this helps!

Answer 2

The line-clamp property truncates text at a specific number of lines. Read more about line-clamp. Also: please check the browser support.

 p#event {
  --line-height: 1.4;
  --num-lines:2; /* 2 lines of text*/
  line-height:var(--line-height);
  display: block; /* Fallback for non-webkit */  
  max-width: 150px;
  height: calc(1em * var(--line-height) * var(--num-lines)); /*2 lines*/
  display: -webkit-box;
  -webkit-line-clamp: var(--num-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 3

You should add both conditions. You can check the demo in the fiddle.

p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

div{
width: 100px;
}

<div>
<p> Your text is long enough to  show this</p>
<p> Your text is long enough to  show this</p>
<p> Your text is long enough to  show this</p>
</div>