how to truncate text with respect to div height?

Question

I have a div with height of 192px. I want to truncate text within div and want to show ... in the end. now due to large text, button is clipping as shown in the snapshot. This happens when I add html tags in it.

Can anyone help?

Answer 1

Try the following CSS:

text-overflow: ellipsis;
overflow: hidden;
whitespace: no-wrap;

This only works for single lines. For multiple lines you need JavaScript.

Answer 2

This question is tagged with javascript, so here's the missing answer.

You could iterate over each character or word (as in this example), while you check that the height is lower than your desired height. On each truthy step, you could overwrite the element content with its text, but without the last word/character.

In converte this case I converted the string in an array and pop it on each iteration. This removes the last part of our text, and makes sure that the loop doesn't go infiniteeeee...

/**
 * Truncates the text of an element depending its height.
 *
 * @param {Element} element
 * @param {Number} height
 */
function truncateByHeight(element, height) {
  var textContent = typeof element.textContent === 'undefined' ? 'innerText' : 'textContent';
  var parts = element[textContent].split(' ');

  while (parts.pop() && element.clientHeight > height) {
    element[textContent] = parts.join(' ');
  }
}


var element = document.querySelector('.box');

truncateByHeight(element, 120);

<div class="box">Cornua naturae fulgura uno coegit quisquis ad margine? Pluvialibus umentia vultus nulli nunc pendebat speciem emicuit! Margine tonitrua caecoque iapeto. Origine levius nam. Silvas valles temperiemque forma? Ignotas tegit. Hunc ligavit: summaque freta illas invasit deerat proximus. Caelo calidis securae mentes pronaque traxit.

Caligine omnia gentes. Posset aere certis eurus titan verba unus homini ora. Sed volucres. Campos effervescere flamina illi pondus umor. Cinxit obstabatque secrevit. Ligavit: natus aberant. Indigestaque regio rapidisque carmen coegit erat discordia liquidas. Ripis nix horrifer terrae dei tepescunt ad vos regio.

Nabataeaque fronde pluviaque vos terra tellure flexi. Neu habendum poena locoque ne. Dedit locoque nunc nebulas. Mentisque liquidum summaque porrexerat cepit. Litem mare. Surgere adhuc ipsa. Orbem hanc volucres iapeto habentem. Dissociata otia inminet nubibus passim erant iners. Semina praecipites reparabat spectent fuerat.</div>