JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-with-ellipsis container-with-text" data-line-count="2">
  VERY LONG TEXT THAT I WANT TO BREAK IN LINES. VERY LONG TEXT THAT I WANT TO BREAK IN LINES.
  <h4>
    dfafafafadfafadfadf adfadfad
  </h4>VERY LONG TEXT THAT I WANT TO BREAK IN LINES. VERY LONG TEXT THAT I WANT TO BREAK IN LINES.

</div>

CSS

.container-with-text {
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

TypeScript

var processTexts = function processTexts($dom) {

  var canvas = processTexts.canvas || (processTexts.canvas = document.createElement("canvas"));

  $dom.find('.block-with-ellipsis').each(function(idx, ctrl) {

    var $this = $(ctrl);

    var font = $this.css('font-family').split(",")[0]; //This worked for me so far, but it is not always so easy.
    var fontWeight = $(this).css('font-weight');
    var fontSize = $(this).css('font-size');
    var fullFont = fontWeight + " " + fontSize + " " + font;
    // re-use canvas object for better performance
    var context = canvas.getContext("2d");
    context.font = fullFont;

    var widthOfContainer = $this.width();
    var text = $.trim(ctrl.innerHTML);
    var words = text.split(" ");
    var lines = [];
    //Number of lines to span over
    var lineCount = $this.data('line-count');

    var currentLine = words[0];
    var processing = "";

    var isProcessing = true;
    var metrics = context.measureText(text);
    var processingWidth = metrics.width;
    if (processingWidth > widthOfContainer) {
      for (var i = 1; i < words.length && isProcessing; i++) {
        processing = currentLine + " " + words[i];
        metrics = context.measureText(processing);
        processingWidth = metrics.width;
        if (processingWidth <= widthOfContainer) {
          currentLine = processing;
        } else {
          if (lines.length < lineCount - 1) {
            lines.push(currentLine);
            currentLine = words[i];
          } else {
            processing = currentLine + "...";
            metrics = context.measureText(processing);
            processingWidth = metrics.width;
            if (processingWidth <= widthOfContainer) {
              currentLine = processing;
            } else {
              currentLine = currentLine.slice(0, -3) + "...";
            }
            lines.push(currentLine);
            isProcessing = false;
          }
        }
      }

      ctrl.innerHTML = lines.join(" ");
   ...