Is there a way to detect when text is wrapping in a DIV? I'm mainly interested to know the number of words on the second to last and last lines of content in a DIV. For example:
This is line 1 and now
wraps to line 2 which
goes to the last line of
content.
If the above was in a DIV, it would be wrapping because of the DIV width. Somehow, I'd like to know the word count on the second to last and last lines. Is there some way of getting that info?
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
I'd say it can't be done in a reliable way.
I don't think nizsmo's will work because this "go to the last character of the first line, which is determined by the "width"" assumes that the width is measured in characters, but it is measured in pixels. You would have to do some calculations on how many pixels in a character, but tath wouldn't work because most fonts aren't fixed width (ie different characters are different widths).
agreed there's no reliable way of doing this. The formula (if you really wanted to do this) will then have to take into account what characters and their widths, then how many of them can fit into the div width.
But this will be too complicated, and probably not necessary. Different browsers also will render a little bit differently, so this may also cause trouble.
Notice I said "theoratically" in my first post, in theory it could be done(taken into account everything basicinstinct has said) but it would proably not worth the hassle and the time.
Just a suggestion which came into mind :)
well, i give up.
here's my progress it's about 80% of the way there.
posting it here in case you feel motivated to build on it and finish it off.
honestly, i think whatever you are doing can most probably be done in some way much easier.
<html>
<head>
<script type="text/javascript">
function getFullWidth(el)
{
var tmp = el.cloneNode(true);
tmp.style.visibility = 'hidden';
document.body.appendChild(
var fullWidth = tmp.offsetWidth;
document.body.removeChild(
return fullWidth;
}
function checkWrapped(el)
{
var kid = el.childNodes[0];
var actualWidth = kid.offsetWidth;
var fullWidth = getFullWidth(kid);
var wraps = Math.ceil(fullWidth/ actualWidth);
guessWraps(kid.firstChild,
}
function guessWraps(tn, wraps)
{
var arr = new Array(wraps);
var len = tn.length;
var charsPerLine = len / wraps;
var s = tn.nodeValue;
for(var i=0; i<arr.length; i++)
{
arr[i] = s.substr((charsPerLine * i), charsPerLine);
}
alert("It might look like this:\n" + arr.join("\n"));
}
</script>
</head>
<body onload="checkWrapped(docum
<div id="test" style="width:100px"><span>
</div>
</body>
</html>
here is some idea, tested only with IE7
========================
<div id=myDiv style="width:130px;">
This is line 1 and now
wraps to line 2 which
goes to the last line of
content.
</div>
<script>
function countIt()
{
var div = document.getElementById("m
var arr = div.innerText.split(" ");
div.innerHTML = "";
for(var i=0; i<arr.length; i++)
{
var sp = document.createElement("sp
sp.innerHTML = arr[i]+ " ";
div.appendChild(sp);
}
var spans = div.getElementsByTagName("
var rows = [];
rows[0] = "";
var j = 0;
for(var i=0; i<spans.length; i++)
{
if(i<spans.length-1 && spans[i+1].offsetTop != spans[i].offsetTop)
{
rows[++j] = "";
}
rows[j] += spans[i].innerText;
}
for(var i=0; i<rows.length; i++)
{
alert("row: " + (i+1) + "\n___________\n\n" + rows[i]);
}
}
</script>
<button onclick="document.getEleme
<button onclick="document.getEleme
<hr>
<button onclick="countIt()">Count it</button>
simple save current html to a variable and then restore it. But if you have there more formating (like <br>, marging, padding etc.) then it would not work as expected. It's not an easy task.
==========================
<div id=myDiv style="width:130px;">
This is <b>line 1</b> and now
wraps to <span style="color:red">line</sp
goes to the last line of
content.
</div>
<script>
function countIt()
{
var div = document.getElementById("m
var html = div.innerHTML;
var arr = div.innerText.split(" ");
div.innerHTML = "";
for(var i=0; i<arr.length; i++)
{
var sp = document.createElement("sp
sp.innerHTML = arr[i]+ " ";
div.appendChild(sp);
}
var spans = div.getElementsByTagName("
var rows = [];
rows[0] = "";
var j = 0;
for(var i=0; i<spans.length; i++)
{
if(i<spans.length-1 && spans[i+1].offsetTop != spans[i].offsetTop)
{
rows[++j] = "";
}
rows[j] += spans[i].innerText;
}
for(var i=0; i<rows.length; i++)
{
alert("row: " + (i+1) + "\n___________\n\n" + rows[i]);
}
div.innerHTML = html;
}
</script>
<button onclick="document.getEleme
<button onclick="document.getEleme
<hr>
<button onclick="countIt()">Count it</button>
Business Accounts
Answer for Membership
by: nizsmoPosted on 2007-11-02 at 22:15:31ID: 20206023
Theoratically, you can write a function/formula which calculates this, based upon the width of your div compared with the length of your string/sentence/content.
If the whol word gets wrapped (instead of partial word) then you can go about doing something like this as an idea:
we can use the substr() method in javascript, and go to the last character of the first line, which is determined by the "width", and detect if the next character is a space, if not then we keep rolling back to the previous character until a space is encountered, then we know the div will wrap from there (since it wraps the whole word).
We can then go from there and repeat the step for the second line (since now we know where the second line begins) and repeat until you get to the third and fourth line which is what you are wanting.
Hope this gives a a kind of idea on how to do it with javascript. I'm not sure if there's an easier way of going about doing this.