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

Discussion in 'Javascript' started by jawolter@gmail.com, Dec 12, 2005.

  1. Guest

    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
     
    , Dec 12, 2005
    #1
    1. Advertising

  2. jcobbers Guest

    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...
     
    jcobbers, Dec 12, 2005
    #2
    1. Advertising

  3. RobG Guest

    Re: Dynamically resize visible text and append dot dot dot (likegmail subject lines.. ) how to question?

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



    --
    Rob
     
    RobG, Dec 12, 2005
    #3
  4. 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
     
    Julian Turner, Dec 12, 2005
    #4
  5. jcobbers Guest

    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?
     
    jcobbers, Dec 12, 2005
    #5
  6. RobG Guest

    Re: Dynamically resize visible text and append dot dot dot (likegmail subject lines.. ) how to question?

    jcobbers wrote:
    > 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.


    --
    Rob
     
    RobG, Dec 12, 2005
    #6
  7. RobG wrote:

    > jcobbers wrote:
    >> 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).


    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
     
    Thomas 'PointedEars' Lahn, Dec 12, 2005
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Blmn
    Replies:
    0
    Views:
    445
  2. HYRY
    Replies:
    10
    Views:
    608
    Bruno Desthuilliers
    Sep 26, 2007
  3. Martin Marcher

    Re: Looping through the gmail dot trick

    Martin Marcher, Jan 20, 2008, in forum: Python
    Replies:
    3
    Views:
    345
    Martin Marcher
    Jan 21, 2008
  4. Ramuis78
    Replies:
    0
    Views:
    350
    Ramuis78
    May 19, 2009
  5. Replies:
    2
    Views:
    1,265
    Adrienne
    Feb 13, 2005
Loading...

Share This Page