Long strings break table layout: how to fix this

Discussion in 'HTML & Website Design' started by yoes_san, Apr 23, 2009.

0
  1. #1
    Hi,

    I have a table that should look like this:
    [​IMG]

    But when the string in table is so very long(ex. "................................"), the table breaks:
    [​IMG]

    Can I fix this behavior, I want the table to display in fixed width and if the string is too long, it force the string to have line break.

    The text is input by visitor of the site so there're no way for me to prevent this.

    I've tried set max-width to <td> and <div> but all it do make the overflowed text disappear.

    ,Thankyou
     
    yoes_san, Apr 23, 2009 IP
  2. iwtmmo

    iwtmmo Active Member

    Messages:
    832
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2
    I think you need to edit "CSS" style file.
     
    iwtmmo, Apr 23, 2009 IP
  3. gummyworms

    gummyworms Active Member

    Messages:
    126
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    yes need more info css or maybe some code
     
    gummyworms, Apr 24, 2009 IP
  4. designgenerator

    designgenerator Guest

    Messages:
    118
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    designgenerator, Apr 24, 2009 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You cannot force a line break, unless you use the break-word property, which used to be Microsoft-only but has been added to CSS3 specs (so I hear the latest Safari supports it).

    What's easier with long strings (and works better cross-browser except IE6) is overflow: hidden. Let it try to overflow, and cut the bitch off. And of course your container needs to be a fixed width so content cannot set the width.

    You might already have overflow: hidden on one of those containers then. If there's a set width on the container though (and max-width should work as well, except of course in IE6), other content should still wrap, instead of also taking advantage of what the long string is doing. Your screenshot is showing the td without the max-width I take it.

    The only string anyone SHOULD be sticking in there is an anchor (a very long url) in which case, you should tell visitors to use a tinyurl type system to post long links... OR
    there's some script that digitalpoint uses, where long url's are automagically shortened. People can click on them, but they can't copy the text and get a usable url. Try it-- type an obscenely long URL here on the forums and see. This is something that would work on the backend, not in the browser.

    IE6 would do better with the break-word because it (incorrectly) stretched containers to accommodate content instead of dealing with overflow like the grownups do.
     
    Stomme poes, Apr 24, 2009 IP