SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table breaks layout with long characters

    Can anyone tell me why a string of long continuous characters will break a table, while a long paragraph will not? Take a look at the attachment to see what I am referring to. You will see that the first table looks fine, but the second table is "broken" due to the long string of numbers in the second cell. How come a long paragraph won't "break" a table while a long continuous string of characters will? I have a feeling that the breaks, or white spaces, between words in the first table has something to do with it, but I'm not sure.
    Attached Images Attached Images
    Bringing your vision to the Web em by em
    emSketch Web Design

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Yes, your feeling is correct. Browsers know to "insert newline" at a whitespace character. But with a long line of unbroken characters (eg. a long URL) the browser doesn't know where to break the string so it doesn't.

    What to do? There are different solutions. eg. overflow: hidden, overflow:scroll and others.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    How come a long paragraph won't "break" a table while a long continuous string of characters will? I have a feeling that the breaks, or white spaces, between words in the first table has something to do with it, but I'm not sure.
    Hi,
    It looks like you've answered your own question. Yes you are correct, the breaks between the words is what allows the text to wrap.

    We do have a the word-wrap property available to us with CSS3 so it will break words when needed.

    word-wrap: break-word;

    .

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Another option is the 'soft hyphen' - if you put the character entity ­ in where you want to allow a break, the browser should hyphenate the word there if it needs to, but keep the word together if not.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks everyone for your replies. I appreciate it. Very helpful.
    Bringing your vision to the Web em by em
    emSketch Web Design

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Sorry, I've just realised that this stupid forum software converted my character entity into the character itself - what it should say in my post is to use & shy; (but without the space, obviously).

    Off Topic:

    Grrr - stupid stupid software!
    When I just type in an entity, eg & s h y ;, it converts it into the character, but if I try to get around that by giving the & as an entity, it prints the whole of & a m p ; s h y ;. Stupid stupid stupid!
    Last edited by Stevie D; Nov 15, 2010 at 16:57. Reason: Stupid stupid stupid forum software

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done <span class="break"> </span> .break {font-size:1px} before. Run your content through some kind of filter before writing it to your database and if you encounter a string longer than say 100 characters, break it up with a shy or a styled span or similar.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •