Is there a way to extract single lines from a ``-Element?

Question

Look at this <div>-Element:

<div id="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque pena&shy;tibus et magnis dis parturient montes, nascetur ridiculus mus.</div>

and this css:

div#text {
    font-family: Arial;
    font-size: 16px;
    width: 200px;
}

When this div is rendered, it is split into many lines and might look like this block:

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aenean commodo ligula
eget dolor. Aenean massa.
Cum sociis natoque pena-
tibus et magnis dis
parturient montes, nascetur
ridiculus mus.

Is there a way to extract, let's say, the 6th line of this div's content using Javascript? This means, I want a function, to which I pass the value 3 and then it returns »tibus et magnis dis«. Is this possible? If so, how can this be done?

Whatch the soft hyphen (­) in the word »penatibus« that makes the word be splittet into two parts.

In a similar way, think of the css-property hyphen:

div#text {
    hyphens: auto;
}

This causes the rendering-machine to hyphenate the text without the need of inserting dashes or ­-entities.

Remember, that there is no newline or <br> or any other marker in the text that splits the text into lines. It is just the rendering-machines word-wrap-algorithm together with css-styles and the textstring itself that is responsible for which words are written into which line.

This is also the reason why this question is different form this.

This Question is also different from this one because the solutions posted there ignore the influence of hyphenations.

Also think of ligatures (like f followed by i in many fonts is replaced by a new glyph, fi, that is a little bit shorter than a normal f followed by a normal i would be. This may influence word-wrap and hyphenation. But when you put each character of your text into a <span>-element to be able to read the position of all these elements, then you will not see f and i being replaced by its shorter ligature fi, and so this method does not return correct results in all cases.

Answer 1

I guess you could trick a bit, and copy the width of the existing element, and then add word per word to see if the height of the new element changes, then increase the line.

I wrote a basic version of this. This only takes into account the width of the div element, none of the other styles (like font-size, letter-spacing, ... for that, you could copy the css styles from the element you wish to get the line nr from)

function copyStyle(source, target) {
  var computedStyle = window.getComputedStyle(source, null),
    prop, obj = computedStyle, i, len, style = '';
  for (i = 0, len = computedStyle.length; i < len; i++) {
      prop = computedStyle[i];
      style += prop + ': ' + obj[prop] + ';';
  }
  target.style = style;
}

function extractHyphens(array) {
  var word, i, len, shyElement = document.createElement('span');
  shyElement.innerHTML = '&shy;';
  for (i = 0, len = array.length; i < len; i++) {
    word = array[i];
    if (word.indexOf(shyElement.innerHTML) >= 0) {
      word = word.split(shyElement.innerHTML);
      array.slice(i, 1, word);
    }
  }
}

function getLine(element, lineNr, callback, measuredWidth) {
  var hiddenElement,
    sourceElement = document.getElementById(element),
      textarea = document.getElementById('textarea'),
    lastHeight,
    outline = '',
    curline = -1,
    words, word;

  if (typeof measuredWidth === 'undefined' ||
    measuredWidth !== sourceElement.offsetWidth) {
    measuredWidth = sourceElement.offsetWidth;
    setTimeout(function() {
      getLine(element, lineNr, callback, measuredWidth);
    }, 100);
  } else {
    hiddenElement = document.createElement('div');
    words = sourceElement.innerHTML;
    words = words.split(' ');
    extractHyphens(words);
    copyStyle(sourceElement, hiddenElement);
    hiddenElement.style.visibility = 'hidden';
    // we don't want anything affecting the height of the "hidden" element
    hiddenElement.style.height = 'auto';
    delete hiddenElement.style['minHeight'];
    delete hiddenElement.style['maxHeight'];
    document.body.appendChild(hiddenElement);
    lastHeight = hiddenElement.offsetHeight;
    for (var i = 0, len = words.length; i < len; i++) {
      word = words[i];
      hiddenElement.innerHTML += word;
      if (lastHeight !== hiddenElement.offsetHeight) {
        curline++;
      }
      if (lineNr === curline) {
        outline += word + ' ';
      }
      hiddenElement.innerHTML += ' ';
      lastHeight = hiddenElement.offsetHeight;
      if (curline > lineNr) {
        break;
      }
    }
    document.body.removeChild(hiddenElement);
    setTimeout(function() {
      callback(element, outline);
    }, 0);
  }
}

function showResult(element, result) {
  alert(element + ': ' + result);
}

window.onload = function() {
  getLine('test', 1, showResult);
  getLine('test2', 6, showResult);
};

#test2 {
  width: 50px;
  font-size: 7px;
  padding: 3px;
}
div {
  padding: 5px;
}

<div id="test">lorem ipsum dolor sit amet, consectetuer adipiscing elit, aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque&shy;&raquo;penatibus&laquo; et magnis dis parturient montes, ascetur ridiculus mus.</div>
<div id="test2">lorem ipsum dolor sit amet, consectetuer adipiscing elit, aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, ascetur ridiculus mus.</div>