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?
Here's a snippet that I'm working on:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled </title>
<style><!--
..dots {
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 1px 6px;
background-color: #eee;
}
--></style>
<script language="JavaS cript">
<!--
//-->
</script>
</head>
<body>
#1 Below is a sentence enclosed in a normal DIV tag.
<div STYLE="width:75 %;background-color:yellow;pa dding:5px;borde r:1px
solid black" title="full text here"> <nobr>As you can see, this would
work very well in the interface, and as more browsers support it, could
easily become the preferred presentation style for users.
</nobr></div>
<P>
#2 And here is that same sentence in a DIV tag which has the
<B>text-overflow:ellips is</B> style attribute<BR>(a s well as
overflow:hidden ) and nobr.
<div STYLE="width:55 %;white-space:nowrap;pa dding:5px;borde r:1px solid
black;overflow: hidden;text-overflow:ellips is"> As you can see, this
would work very well in the interface, and as more browsers support
it, could easily become the preferred presentation style for users.
</div>
<P>
#3 And here is that same sentence in a DIV tag which has the
<B>text-overflow:ellips is</B> style attribute<BR>(a s well as
overflow:hidden ) without nobr.
<div STYLE="width:55 %;background-color:yellow;pa dding:5px;borde r:1px
solid black;overflow: hidden;text-overflow:ellips is"> <nobr>As you can
see, this would work very well in the interface, and as more browsers
support it, could easily become the preferred presentation style for
users. </nobr></div>
<P>
#4 And here is that same sentence in a SPAN tag </p>
does not work<br>
<span CLASS="dots"> <nobr>As you can see, Span isn't working, why might
that be? and as more browsers support it, could easily become the
preferred presentation style for users. </nobr></span>
</body>
</html>
references for help:
http://wiki.fastmail.fm/wiki/index.p...erflowEllipsis
this example:
http://joelpt.eml.cc/TextOverflowEllipsis.html or this one:
http://robm.fastmail.fm/web/table_autosize.html
and this posting:
http://groups.google.com/group/comp....f5e54642377323
