SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text wrapping within a td

    Hi,

    I have a problem with text wrapping within a td that and I can't seem to find a solution in any of the posts here.

    The text that I need to put into the td can potentially be long with no whitespace. Sometimes it may have whitespace and sometimes not, there's no way of knowing in advance. If it has no whitespace then it pushes the td width out for the full width of the text which breaks my site.

    I have found the CSS attribute "table-layout: fixed" and have used it on the outer table of my site so the overall site doesn't break, but it doesn't work on the td in the inner table that contains the text. So that td still gets pushed out until it reaches the edge of the site when the remainder of the text just disappears and there's no scroll bar to use either.

    Does anyone know of a way to tell a browser to wrap the text at the specified width of the td regardless of whether there's any whitespace? I'd rather not resort to fiddling with the text in a script, but just let the browser do it.

    Debbie-Leigh
    QuicknEasySalesPro.com
    - your quick and easy, yet powerful solution for managing your
    membership site sales, downloads and affiliates.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If the word is too long for the space you allow it, it will always stretch the table cell/div/whatever. You'll have to break the word on the server-side in order to accomplish what you want.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.
    Best solution: If you use a server side language (PHP, ASP, Phyton) you could use that to break the string after # of characters.
    Other/bad solution: Use the word-wrap attribute. However, this is IE5.5+ ONLY.
    I think it will be added to the CSS3 spec. But that doesn't help you now.

    -Helge

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible solution to text wrapping problem within a td

    Hi,

    Thanks for all your suggestions. I've been playing around with some of them and various css settings because, as I said, I'd rather find a non-scripting solution if possible.

    Well, I think I've found a way to do it (very useful link to the MS HTML reference - thanks Helge).

    What I'm using is a combination of wrapping the cell contents in another table which uses the css properties: table-layout :fixed, width :100% and word-wrap :break-word.

    This works in IE and (sort of) in NS. The first 2 make it work in NS - the tables don't break, but it doesn't do the wrapping properly like IE does. While IE does do everything properly, NS seems to make the text float over everything to the right of the cell.

    So if anyone knows of a way to tell NS to not float the text, but to just truncate it or wrap it properly, then I think we'll have a complete solution to the lack of a wrapping function in HTML. Judging by the amount of frustration in this area in other posts, I think this would be a godsend don't you?

    Debbie-Leigh
    QuicknEasySalesPro.com
    - your quick and easy, yet powerful solution for managing your
    membership site sales, downloads and affiliates.

  5. #5
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Debbie-Leigh
    ... but it doesn't do the wrapping properly like IE does. While IE does do everything properly, ...
    Well, that's a first, then.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible solution to text wrapping problem within a td

    Hi,

    I've now found a way to stop the floating. The "overflow :hidden" css attribute seems to stop it, although it does clip the content. Even though you can use "overflow :scroll", it doesn't seem to produces the expected scrollbars, even in IE6 or NS6.

    So even though my solution works with IE, there doesn't seem to be a way to get NS to word wrap properly (yet?), although it does stop the tables from breaking (which is what I was after in the first place, anyway).

    So I'm a happy bunny again.

    Debbie-Leigh
    QuicknEasySalesPro.com
    - your quick and easy, yet powerful solution for managing your
    membership site sales, downloads and affiliates.


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
  •