Re: Ellipses nowrap for text that's too long in a span tag

jawolter (AT) gmail (DOT) com wrote:

I have text that is too long to nicely fit on a given page, so I want
to add ellipses to the end that dynamicaly resize based on the person
resizing the page width. If you hover it would show the full text,
using a title attribute I believe.

It works for a div, but not a span... any ideas?

Name: text-overflow-mode
Applies to: block-level and inline-block elements

You do know that CSS3 properties and/or values are likely to fail in
most browsers if used on a www site?

--
Spartanicus

Thanks for the reply, this will be for an intranet site with ie 5 or
greater. according to this:
http://joelpt.eml.cc/TextOverflowEllipsis.html it looks like I could go
down to IE 5 and only loose the ellipses, but still get the
text-overflow: hidden.

I'm not a designer, but a developer who's learning design. Here is a
javascript method... which works pretty well first try... what method
is safer, and/or better: javascript or CSS3 properties?

<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')">
(courtesy this thread, thanks Rob
http://groups.google.com/group/comp....f5e54642377323)



Thanks!

jawolter (AT) gmail (DOT) com wrote:

Thanks for the reply, this will be for an intranet site with ie 5 or
greater. according to this:
http://joelpt.eml.cc/TextOverflowEllipsis.html it looks like I could go
down to IE 5 and only loose the ellipses, but still get the
text-overflow: hidden.

Ah, I didn't know that this was originally proprietary IE code that
apparently has been adapted into the CSS3 CR.

I'm not a designer, but a developer who's learning design. Here is a
javascript method... which works pretty well first try... what method
is safer, and/or better: javascript or CSS3 properties?

This group is dedicated to authoring for the www, questions regarding
developing for a particular client on an intranet should go to a group
dedicated to that client (i.e. a group in the microsoft.* hierarchy).

--
Spartanicus

Thank you very much Spartanicus for the assistance. I'll direct the
question to the microsoft.* groups.