jcobbers wrote:
I keep looking.
I found a <nobr> tag that prevents text from breaking, no matter how
long it is. Could I have that in a span (or use some other css property
to prevent line breaks) and enclose it in a span.
No, don't use that. <nobr> was a Netscape invention that never made it
into any W3 HTML specification. The closest similar thing is the
deprecated 'nowrap' attribute for TR and TD elements (but don't use that
either).
Another kludge to stop wrapping is to replace all spaces with -
but I wouldn't suggest that either.
The correct way to stop wrapping is to set the CSS 'white-space'
property to 'nowrap':
<URL:http://www.w3.org/TR/CSS2/text.html#propdef-white-space>
There is no reasonable way to determine if a character string is too
long to fit within an element that will work in a good number of
browsers. You might try asking in a CSS group.
Anyhow, here is a script that does it in IE and Firefox, it's just shows
a method, you'll need to clean it up with feature detection and make it
degrade gracefully. You could run it onload and onresize.
I may well leave a space between the last letter or digit and the
ellipsis, that shouldn't happen so you should clean that up.
<script type="text/javascript">
function trimMenu(id)
{
var d = document.getElementById(id);
var spans = d.getElementsByTagName('span');
for (var i=0, len=spans.length; i<len; ++i){
addEllipsis(spans[i]);
}
}
function addEllipsis(d)
{
var x = d.parentNode.offsetWidth;
var txt = d.firstChild.data;
while (x < d.offsetWidth){
txt = txt.substring(0,txt.length-1);
d.firstChild.data = txt + '\u2026';
}
}
</script>
<!-- Style attribute wrapped for posting -->
<div id='divA')
style="border:1px solid blue; width:100px; white-space: nowrap;
overflow: hidden;">
<span>Here is some too-long text</span><br>
<span>Another bit of too-long text</span><br>
<span>Yup, too-long text</span><br>
</div>
<input type="button" value="Trim menu items"
onclick="trimMenu('divA')">
--
Rob
