Dynamically resize visible text and append dot dot dot (like gmail subject lines.. ) how to question

J

jawolter

I have a list of links that are sometimes too long to display on a
given screen. I want to trim the ends of them if they are too long, and
show dot dot dot. If the browser is widened, though, and there is more
room, i want to see all the link.

I want to have 1 line of text that is say 40% of the screen. When
someone enlargens the browser window, it shows more of the text.

If the text is longer than the 40% I want to trim it and display dot
dot dot.

So an example

when the page is narrow:

| |
|Tracing the effe...|
| |

widen the browser:

|
|
|Tracing the effects of migratory fowl on gmail usage |
|
|

I'm having a really hard time thinking of good search keywords. I
haven't found anything yet. I've tried searching for:
concetanate javascript text dynamically
visible text area resize javascript
span text resizes with browser
 
J

jcobbers

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.

Somehow it would work like the sliding doors css button methodology.
You would only see what fits out the "door" and anything longer would
get a dot dot dot and would not show...
 
R

RobG

jcobbers said:
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 &nbsp; -
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);
}
}

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')">
 
J

Julian Turner

(e-mail address removed) wrote:

[snip]
I have a list of links that are sometimes too long to display on a
given screen. I want to trim the ends of them if they are too long, and
show dot dot dot.
[snip]
I'm having a really hard time thinking of good search keywords.

RobG has given you the clue: ellipsis.

There is a proposed CSS3 property (currently in IE6 and Safari) called
text-overflow.

See the following for an analysis of support:-

<URL:http://wiki.fastmail.fm/wiki/index.php/TextOverflowEllipsis>

Regards

Julian Turner
 
J

jcobbers

Thank you so very much.

I tried Rob's script and it worked just like I wanted.

Julian's CSS based method also worked, i.e. this example:
http://joelpt.eml.cc/TextOverflowEllipsis.html or this one:
http://robm.fastmail.fm/web/table_autosize.html

My final followup is -- from a design perspective does anyone have
suggestions as to using javascript or css to accomplish this? I'm in
the process of investigating the versions of IE or firefox or Opera /
etc. that my target audience will be using... are there any 'gotcha's
I should look out for?
 
R

RobG

jcobbers said:
Thank you so very much.

I tried Rob's script and it worked just like I wanted.

Julian's CSS based method also worked, i.e. this example:
http://joelpt.eml.cc/TextOverflowEllipsis.html or this one:
http://robm.fastmail.fm/web/table_autosize.html

My final followup is -- from a design perspective does anyone have
suggestions as to using javascript or css to accomplish this? I'm in

The better solution is CSS, you may be able to detect support for
"text-overflow:ellipsis" and substitute script (but ensure appropriate
feature detection there too).

the process of investigating the versions of IE or firefox or Opera /
etc. that my target audience will be using... are there any 'gotcha's
I should look out for?

If it is for a general purpose web site, you'll probably get plenty of
complaints from the maybe 10% whose browser doesn't have suitable CSS or
the 10% who don't have script support. Those numbers are of course very
open to question, your own site logs will give you better numbers (but
still not perfect).

Think carefully about your UI and see what you can do for them - they
should still get a (less spoofy) fully functional site.

Ask in a CSS forum - comp.infosystems.www.authoring.stylesheets should
do the trick.
 
T

Thomas 'PointedEars' Lahn

RobG said:
If it is for a general purpose web site, you'll probably get plenty of
complaints from the maybe 10% whose browser doesn't have suitable CSS or
the 10% who don't have script support. Those numbers are of course very
open to question, your own site logs will give you better numbers (but
still not perfect).

I see the "still not perfect" remark and still feel obliged to comment
on both :) The site logs will only show _past_ data, whether that is your
"target audience" or users with "suitable CSS support" or "script support".
Meaning that if you optimize your site so that it applies to that data,
you will inevitably only attract the respective users in the future --
that is pessimization[tm], not optimization.

IOW: Design the site IE-only, and you will attract mostly, if not only,
IE users; design it script-only, and you will attract only users with
scripting enabled. Then your logs will indeed show mostly IE users or
only users with enabled script support, and you could infer from them
that you made the right design decision -- however, you did not.
Think carefully about your UI and see what you can do for them - they
should still get a (less spoofy) fully functional site.

Ask in a CSS forum - comp.infosystems.www.authoring.stylesheets should
do the trick.

Full ACK.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top