If I have a div that’s 300px by 20px, is there a function that calculates whether a string will display with a line break, given font-size of 21px?
If not, I’ll have to create some code, but if it’s already available, that’s even better
If you are using a monospace font it’s quite simple: 300/21=14.3 letters. If your string is longer than 14 characters it will break. If your font is not monospace it is practically impossible to predict on the server side at least. Perhaps with javascript you could find the computed length of the text in the browser.
I’ll have to check that out. Thanks jonas-e.
Hopefully there is an easier way, but this “off the cuff” example should help you get started.
It displays the rendered width and height of a string based on its css styles. If you change the css styles for the string you can see the effect they have on the calculated width and height of the rendered text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#mySpan{
display: table-cell;
font-family: arial;
font-weight: bold;
font-size: 2em;
}
</style>
<script type="text/javascript">
window.onload=function(){
var strTesterO = document.getElementById('strTester')
var str = "The cow jumped over the moon";
var spanO = document.createElement('span');
spanO.id = 'mySpan'
spanO.appendChild(document.createTextNode(str));
strTesterO.appendChild(spanO);
alert(document.getElementById('mySpan').clientWidth + "\
"+document.getElementById('mySpan').clientHeight);
}
</script>
</head>
<body>
<div id="strTester"></div>
</body>
</html>
And if you use jQuery on your page the javascript could be even shorter and easier.
I’m not familiar with window.onload. I understand what it does in the script, but can’t find a reference that says onload is a property of window. Am I thinking about it correctly?
There’s lots of references to window.onload on Google.
Basically, the onload event for the window is triggered when the page has finished loading after which the code within the function is executed.
The very best solution that I’ve come across for this is to use a hidden copy of that div, where you put the string in that hidden copy and work out if a line break occurs in that hidden div.
Seams to me that this thread has gradually turned in to a talk about javascript options rather than php …
@nichemtktg, you might want to repost your question in the javascript forum.
I doubt it. If you look at the “back end” code that is run by jquery it’ll most likely be a lot more lines than the handful of plain javascript lines in the demo.
I guess it depends. I prefer the simplicity of jQuery which might be easier to understand for someone with little js knowledge:
$(document).ready(function(){
$('#strTester').html('<span id="mySpan">The cow jumped over the moon</span>');
var mySpan = $('#mySpan')[0];
alert($(mySpan).width()+'\
'+$(mySpan).height());
});
Remember to include this in your page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
And to check out the documentation:
http://docs.jquery.com/
In this case particularly:
http://api.jquery.com/category/manipulation/
I trust that the jQuery team has performance as a top priority. Using $(document).ready() is more generic than using window.onload because you can use the first more times but the latter only once on a page.
I see way too many people (and I’m not saying you’re one of them) try to take the “jquery shortcut” to learning javascript.
All jquery is, is a bunch of javascript functions that someone else has pre-written for you. There is nothing at all you can do with jquery that you cannot do with just plain javascript.
Many noobies try to take the jquery shortcut and more often than not when they get stuck they have no, or next to no, javascript knowledge to help them get unstuck and so they end up in forums like this one looking for someone to drag them out of the coding quicksand they fell into. Imo noobies would generally be much better off learning plain javascript first to a reasonable level of understanding before “playing” with jquery otherwise they will mostly likely end up continually floating around forums looking for help - but that’s just me 
@webdev1958: You’re probably right. The reason why I appreciate jQuery so much, is because I know how tedious the same tasks are in plain js - because I learned that first …
“tedious” is a relative term and so is subjective.
I find javascript relatively straight forward and normally don’t waste time using jquery when the same task can be run with less code using plain javascript.