Multiline Ellipsis using characters per line. A cross-browser solution.

characters-per-line.js

var FONTCONSTANT;

/***
 * @summary Sets font constant
 * @description For Proportional Fonts and Monospaced-Fonts
 * @description Font constant (german "Dickte") is the minimum distance between two letters of a font
 * @description Value comes from how much space a letter takes compares to an m-dash, a dash that is as wide as an m (Geviert).
 * @description Once your set expanded or condensed fonts, you need different font constances.
 */
var initFontConstant = function() {
  var fontFamily = document.querySelector("body").style.fontFamily;

  switch (fontFamily) {
  case "Helvetica Neue":
  case "Calibri":
    FONTCONSTANT = 1.9;
    break;
  case "Arial":
  case "Lucida Grande":
  case "Tahoma":
    FONTCONSTANT = 1.91;
    break;
  case "Trebuchet MS":
    FONTCONSTANT = 2.11;
    break;
  case "Verdana":
    FONTCONSTANT = 1.73;
    break;                            
  default:
    FONTCONSTANT = 1.9;
    break;
  }
};

/***  
 * summary. Characters per line (CPL)
 * description. CPL = width / (font-size / font-constant)
 * 
 * @param {Object} fontSize: Text's font size 
 * @param {Integer} width: Width of DOM element that concernce the text
 * @return {Integer} cpl: Characters per line
 */
var calculateCharactersPerLine = function(fontSize, width) {
  var cpl = Math.floor(width / (fontSize / FONTCONSTANT));
  return cpl;
};

module.exports = {
  initFontConstant : initFontConstant,
  calculateCharactersPerLine : calculateCharactersPerLine
};

main.js

require("core-js-bundle");

window.cpl = require("./characters-per-line");
window.textEllipsis = require("./text-ellipsis");
window.typography = require("./typography");

window.cpl.initFontConstant();
window.typography.setEllipsis();

MultiLineEllipsis.md

Use of objects in typography.js

It is recommended to create an object, that stores the original text, so that you can use an event listener for fluid and responsive designs.

text-ellipsis.js

/*** 
 * summary. Sets the ellipsis based on the cpl - 3.
 * @param {Object} textLine: Node element, where to set the ellipsis
 * @param {Integer} cpl: Characters per line. Set or calculate cpl.
 */
var setEllipsis = function(textLine, cpl) {
  if (textLine.innerText.length > cpl) {
    textLine.innerText = textLine.innerText.substring(0, cpl - 3).trim() + "...";
  }
};

module.exports = {
  setEllipsis : setEllipsis
};

typography.js

/*** 
 * summary. Sets the ellipsis based on the characters per line that fit into the width.
 * description. It's recommended to get font-size and width from the element's computed styles.
 */
var setEllipsis = function() {
  var charactersPerLine = cpl.calculateCharactersPerLine(16, 250);
  textEllipsis.setEllipsis(teaser.element, charactersPerLine * teaser.numberOfLines);
};

module.exports = {
  setEllipsis : setEllipsis,
};

Note: Open Types users could use this to work with font constants: Open Type Feature OPBD

Note: Font constance needs the rendered font, which is quite difficult to get. Help is very much welcome.