I'm wondering if there's a way to count lines inside a div for example. Say we have a div like so:
<div id="content">hello how are you?</div>
Depending on many factors, the div can have one, or two, or even four lines of text. Is there any way for the script to know?
In other words, are automatic breaks represented in DOM at all?
If the div's size is dependent on the content (which I assume to be the case from your description) then you can retrieve the div's height using:
var divHeight = document.getElementById('content').offsetHeight;
And divide by the font line height:
document.getElementById('content').style.lineHeight;
Or to get the line height if it hasn't been explicitly set:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");
You will also need to take into account padding and any inter-line spacing.
EDIT
Full self contained test, explicitly setting line-height:
<html>
<script>
function countLines() {
var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = parseInt(document.getElementById('content').style.lineHeight);
var lines = divHeight / lineHeight;
alert("Lines: " + lines);
}
</script>
<body onload="countLines();">
<div id="content" style="width: 80px; line-height: 20px;">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>
</body>
</html>
No, not reliably. There are simply too many unknown variables
The list goes on. Someday I hope there will be such a method of reliably accomplishing this with JavaScript, but until that day comes, your out of luck.
I hate these kinds of answers and I hope someone can prove me wrong.
You should be able to split('\n').length and get the line breaks.
update: this works on FF/Chrome but not IE.
<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
var arr = $("div").text().split('\n');
for (var i = 0; i < arr.length; i++)
$("div").after(i + '=' + arr[i] + '<br/>');
});
</script>
</head>
<body>
<div>One
Two
Three</div>
</body>
</html>
I am convinced that it is impossible now. It was, though.
IE7’s implementation of getClientRects did exactly what I want. Open this page in IE8, try refreshing it varying window width, and see how number of lines in the first element changes accordingly. Here’s the key lines of the javascript from that page:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));
Unfortunately for me, Firefox always returns one client rectangle per element, and IE8 does the same now. (Martin Honnen’s page works today because IE renders it in IE compat view; press F12 in IE8 to play with different modes.)
This is sad. It looks like once again Firefox’s literal but worthless implementation of the spec won over Microsoft’s useful one. Or do I miss a situation where new getClientRects may help a developer?
One solution is to enclose every word in a span tag using script. Then if the Y dimension of a given span tag is less than that of it's immediate predecessor then a line break has occurred.