Series of <span> elements in <td>, how to break to new line?

Discussion in 'HTML & Website Design' started by fatabbot, Feb 5, 2007.

  1. #1
    Hi,

    I'm having a php loop which generates x amount of <span> elements in a <td>

    <td>
    <span>text</span>
    <span>text</span>
    <span>text</span>
    <span>text</span>
    ...
    </td>

    The amount of spans is dynamic and now known upfront. The problem is that the <td> is 600 width, and if there are too many span elements, the td gets too wide (600+). Is there some sort of mechanism to make the span elements go to a new line when the end of the td is reached? The <wbr> does the trick but it's not recognized by the w3c validator. Any other solutions? Or a CSS alternative for this <wbr> element?
     
    fatabbot, Feb 5, 2007 IP
  2. jestep

    jestep Prominent Member

    Messages:
    3,659
    Likes Received:
    215
    Best Answers:
    19
    Trophy Points:
    330
    #2
    Have you tried using <br /> after each <span>?

    There isn't any way to put in a break after a certain length because the actual size of the text is determined after it goes to the browser. Some people may have their browser resize their text before they ever see it. If you put spaces after each word it may also automatically cause the text to wrap inside the table.

    Alternately you could come up with a rough number of characters and put in a break once that is reached. I don't think it would be extremely hard to write a php script to do this.
     
    jestep, Feb 5, 2007 IP
  3. fatabbot

    fatabbot Well-Known Member

    Messages:
    559
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    138
    #3
    I can't really break after a number of characters, because the content of the spans are words. So it needs to break after a word.
    A <br /> after each span is also not good, because than i have just a long vertical list. :(
     
    fatabbot, Feb 5, 2007 IP
  4. rgchris

    rgchris Peon

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You could also learn CSS if you don't want to use hard breaks.
     
    rgchris, Feb 5, 2007 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    With the information we have, there is no compelling reason for the lines not to break as needed between words. We simply don't have enough info to develop a sane answer.

    In the usual case, a series of span elements tells me you aren't using semantic markup. Show us the html of some typical output. Or, give us a link to a representative page.

    cheers,

    gary
     
    kk5st, Feb 5, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Exactly. What is it that you are trying to do? If you can show us the code you are using (or better yet, link to a demo page), we'll (most likely) be able to show you a much better way to do it.
     
    Dan Schulz, Feb 6, 2007 IP