How to count the number of lines within a div that does not have a "line limiter"?

Question

How can I count the number of lines in a div who does not own a \n or a <br> at the end of each line? Exemplifying:

var el = document.getElementById('theDiv');
    lines = el.innerHTML.replace(/ |^\s+|\s+$/g,'').split('\n'),
    lineCount = lines.length;

alert(lineCount); // 5 = correto.

div {
    background: #333;
    color: #fff;
    max-width: 60px;
    text-align: center;
}

<div id='theDiv'>
    AAAAA
    BBBBB
    CCCCC
    DDDDD
    EEEEE
</div>

At the end of each line there is one \n, then it is simple to do this count only using a split(). But the problem is: And when there is no such "limit" between one line and another?

Consider the case that "break" is made by a rule in the CSS that sets a maximum width for the div, for example:

var el = document.getElementById('theDiv');
    lines = el.innerHTML.replace(/ |^\s+|\s+$/g,'').split('\n'),
    lineCount = lines.length;

alert(lineCount); // vai mostrar 1...

div {
    background: #333;
    color: #fff;
    max-width: 60px; /* O css limita a largura e 'quebra' a linha */
    text-align: center;
}

<div id='theDiv'>AAAAA BBBBB CCCCC DDDDD EEEEE</div>

The alert() displayed is not wrong, there really is a single line. But, visually speaking, there are 5 lines like in the previous example.

How can I do this line count?

---

_{At first I’m looking for an answer without the use of frameworks, but a response using jQuery will certainly help and be very welcome.}

Answer 1

I came up with this idea: to put one <span> around each character and check if the vertical position is the same as the next one. If not then there was a line change :)

Of course this implies that there is no CSS applied to #theDiv span but this is easy to do a reset.

var text = $('#theDiv').text();
var newText = text.split('').map(function (letra) {
    return ['<span>', letra, '</span>'].join('');
}).join('');
$('#theDiv').html(newText);

var linhas = 1;
var ultimaLinha;
$('#theDiv span').each(function () {
    var pos = this.getBoundingClientRect().bottom;
    if (ultimaLinha && pos != ultimaLinha) linhas++;
    ultimaLinha = pos;
});
alert(linhas); // 5

jsFiddle: http://jsfiddle.net/91pmfghq/

Answer 2

In addition to the width, set the line-height of the element via css:

div {
    max-width: 60px;
    line-height: 14px;
}

And with javascript just divide the height of the element by the line height:

var minhaDiv = document.getElementById("conteudo"),
    estiloComputado = window.getComputedStyle(minhaDiv),
    alturaDiv = minhaDiv.offsetHeight,
    alturaLinha = parseInt(estiloComputado.getPropertyValue("line-height"));

alert(alturaDiv / alturaLinha);

Example working on Sqlfiddle.