Determining if a line has wrapped in a browser - html

Question

Is there any programmatic method for determining if a line has wrapped in the browser it is being displayed in? The content below this line is absolutely positioned (for purposes of source-ordering) and I need to change its position if the line wraps.

Answer 1

You can determine if an element was wrapped by checking its height and comparing it to a similar element with the same content but wider.
This is how you can do it:
Create a hidden element with the same content and style as the the one you want to check, but with a really big width value.
Append that created element to the element that contains the line or paragraph.
Compare the heights of the elements (if they are the same, no wrapping; if they are different, the line was wrapped).
Remove the created element.
For example:
function checkWrapping() {
// for each paragraph in the div, check if it was wrapped
$("#mydiv").find("p").each(function () {
// create a hidden paragraph with the same text and append it to the parent
var aux = $("<p style='display:none;position:absolute;width:10000000px'>" + $(this).text() + "</p>");
$(this).parent().append(aux);
// compare the height of the paragrap with the height of the one-line paragraph
if ($(this).height() > $(aux).height()) {
console.log($(this).attr("id") + " is wrapped!");
} else {
console.log($(this).attr("id") + " is NOT wrapped!");
}
// remove the hidden paragraph at the end of the check
$(aux).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
<p id="p0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique rutrum velit, sit amet vestibulum dui consectetur at. Suspendisse scelerisque pellentesque lectus in lacinia.</p>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique rutrum velit, sit amet vestibulum dui consectetur at.</p>
</div>
<input type="button" value="check if wrapped" onclick="checkWrapping();">
You can see the sample also on this jsfiddle: http://jsfiddle.net/o1ay0e71/ (it will allow you to resize the window easily to compare results).
Also, if the line has html tags, use .html() instead of .text() as shown on this update: http://jsfiddle.net/o1ay0e71/1/