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 plete.

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' ?

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 plete.

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' ?

• javascript
• css
• overflow
• hidden

• 5 use text-overflow: ellipsis – jonatjano Commented Aug 22, 2018 at 13:26
• It depends if the text is on one line or multiline? If it's multiline you can't use text-overflow: ellipsis; – Dejan.S Commented Aug 22, 2018 at 13:28
• on what event or action do you want your 3 dots to go away. What does it look like in an action sequence for a user to read all of the text? – klewis Commented Aug 22, 2018 at 13:33
• The text is on multiple lines. If i use text-overflow: ellipsis, i only get one line of text... – kabooya Commented Aug 22, 2018 at 13:33
• can you send an example of the html you have please, it could help us understand the problem a little better. – jonatjano Commented Aug 22, 2018 at 13:44

4 Answers 4

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;
}

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 modo 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!

p {     
 display: inline-block;
 text-overflow: ellipsis;
 line-height: 1.6rem;
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 4; //it shows how many rows will display
 -webkit-box-orient: vertical;
 max-height: 7.2rem;
 }

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>