Can you force a 'break-word' wrap on a td without specifying its width?

Discussion in 'HTML' started by CRON, Nov 2, 2006.

  1. CRON

    CRON Guest

    Anyone know a way to force a break-word wrap on a table cell without
    specifying its width? I want it to just work the very same as a regular
    wrap.
    ie it breaks the word if it doesnt fit into the cell.

    FOR EXAMPLE:
    a normal table wrap::::::::::::::::::::::::::
    <table width="500" border="1">
    <tr>
    <td width="350">&nbsp;</td>
    <td>this sentence wraps perfectly without specifying the cell
    width</td>
    </tr>
    </table>

    A break-word wrap on the same table:::::::::::::::::::::
    <table width="500" border="1">
    <tr>
    <td width="350">&nbsp;</td>
    <td style="word-wrap:
    break-word;">thisisaverylongwordthatdoesnotwrapandstretchesthecell!</td>
    </tr>
    </table>

    table-layout:fixed works but its not really an option because it
    overrides cell widths in IE half the time! Is there any other way to
    get what I want?
    thanks
    Ciarán
    CRON, Nov 2, 2006
    #1
    1. Advertising

  2. CRON

    Jim Moe Guest

    Re: Can you force a 'break-word' wrap on a td without specifyingits width?

    CRON wrote:
    > Anyone know a way to force a break-word wrap on a table cell without
    > specifying its width? I want it to just work the very same as a regular
    > wrap.
    > ie it breaks the word if it doesnt fit into the cell.
    >

    No.
    You could put it in a div and apply "overflow:hidden".

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Nov 2, 2006
    #2
    1. Advertising

  3. CRON

    CRON Guest


    > No.
    > You could put it in a div and apply "overflow:hidden".
    >


    Thanks for the reply Jim but it's not really that simple for me. I have
    tables all over my site and I've just realised that when people post a
    link or really long word it stretches the layouts all over the place.
    That's why I need a solution that only involves CSS so I can make the
    change site-wide.
    CRON, Nov 2, 2006
    #3
  4. CRON

    Ben C Guest

    On 2006-11-02, CRON <> wrote:
    > Anyone know a way to force a break-word wrap on a table cell without
    > specifying its width? I want it to just work the very same as a regular
    > wrap.
    > ie it breaks the word if it doesnt fit into the cell.

    [snip]
    > <td style="word-wrap:
    > break-word;">thisisaverylongwordthatdoesnotwrapandstretchesthecell!</td>
    > </tr>
    ></table>
    >
    > table-layout:fixed works


    Does that actually break long words? Or just clip them?

    I didn't think you could ever break long words in CSS 2.1, but IE does
    have some extra non-standard properties for specifying that (I think it
    might be the text-overflow property).

    The only other possibility is to insert breaking zero width space
    characters between each character in the content. But I think you said
    you didn't want to change all the content.
    Ben C, Nov 2, 2006
    #4
  5. CRON

    CRON Guest

    Hi Ben Thanks for the reply,

    > > table-layout:fixed works

    >
    > Does that actually break long words? Or just clip them?

    Yes if you use table-layout:fixed it has the same effect as setting the
    width of the cell. In Firefox, it leaves the cell the same size and
    overflow:visibles the content ... if u get me?

    > I didn't think you could ever break long words in CSS 2.1, but IE does
    > have some extra non-standard properties for specifying that (I think it
    > might be the text-overflow property).

    I havent tried overflows yet - I might have a look at it. even if it
    only works for IE it's better than nothing.


    > The only other possibility is to insert breaking zero width space
    > characters between each character in the content. But I think you said
    > you didn't want to change all the content.


    How does this work? it moght not work but I'd be interested for future


    Cheers,
    Ciarán
    CRON, Nov 2, 2006
    #5
  6. CRON

    Jim Moe Guest

    Re: Can you force a 'break-word' wrap on a td without specifyingits width?

    CRON wrote:
    >> No.
    >> You could put it in a div and apply "overflow:hidden".

    >
    > Thanks for the reply Jim but it's not really that simple for me. I have
    > tables all over my site and I've just realised that when people post a
    > link or really long word it stretches the layouts all over the place.
    > That's why I need a solution that only involves CSS so I can make the
    > change site-wide.
    >

    There is nothing that you can do that does not require some sort of
    server side processing. "overflow:hidden" (CSS) is not an attribute you
    can apply to a table cell directly.
    If you are considering zero-width characters, which is a post-processing
    step, then all sorts of other options are open as well, like converting
    the URL to a real link, inserting spaces every nth character, adding the
    <div>.
    It sounds like you are using tables for layout. This is one of the
    problems doing that.
    There have been several discussions regarding this issue in the last
    couple of months.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Nov 3, 2006
    #6
  7. Scripsit CRON:

    > I have tables all over my site and I've just realised that when people
    > post a link or really long word it stretches the layouts all over the
    > place.


    Then the real problem that you accept any junk as input from strangers. If
    you don't have lots of guestbook spam yet, you will. If you cannot afford
    server-side preprocessing of input data, you cannot afford to have a
    guestbook or other visitor-editable content.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 3, 2006
    #7
  8. CRON

    Ben C Guest

    On 2006-11-02, CRON <> wrote:
    >> > table-layout:fixed works


    >> Does that actually break long words? Or just clip them?


    > Yes if you use table-layout:fixed it has the same effect as setting the
    > width of the cell. In Firefox, it leaves the cell the same size and
    > overflow:visibles the content ... if u get me?


    I think so. You mean it sticks out of the side, rather than breaking
    long words? In other
    words You ne
    ver get th
    is eff
    ect of words break
    ing across lines where they shouldn't.

    [snip]
    >> The only other possibility is to insert breaking zero width space
    >> characters between each character in the content. But I think you said
    >> you didn't want to change all the content.

    >
    > How does this work? it moght not work but I'd be interested for future


    The idea is you insert ​ which is the unicode "Zero Width Space
    Character" between all the characters in your content. Or <wbr>. This
    came up recently, but I didn't manage to find the thread.

    I think the gist of it was the usual story: varying support across
    browsers for either thing.
    Ben C, Nov 3, 2006
    #8
  9. CRON

    Toby Inkster Guest

    Jim Moe wrote:

    > "overflow:hidden" (CSS) is not an attribute you can apply to a table
    > cell directly.


    Why not?

    http://www.w3.org/TR/CSS21/visufx.html#overflow

    : 'overflow'
    :
    : Value: visible | hidden | scroll | auto | inherit
    : Initial: visible
    : Applies to: non-replaced block-level elements, table cells,
    : and inline-block elements
    : Inherited: no
    : Percentages: N/A
    : Media: visual
    : Computed value: as specified

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 3, 2006
    #9
  10. CRON

    Ben C Guest

    On 2006-11-03, Toby Inkster <> wrote:
    > Jim Moe wrote:
    >
    >> "overflow:hidden" (CSS) is not an attribute you can apply to a table
    >> cell directly.

    >
    > Why not?
    >
    > http://www.w3.org/TR/CSS21/visufx.html#overflow
    >
    >: 'overflow'
    >:
    >: Value: visible | hidden | scroll | auto | inherit
    >: Initial: visible
    >: Applies to: non-replaced block-level elements, table cells,
    >: and inline-block elements
    >: Inherited: no
    >: Percentages: N/A
    >: Media: visual
    >: Computed value: as specified


    Good question.

    It just is part of the way that the big browsers format tables, that
    they never allow a cell to be narrower than its content minimum width,
    even if that means making the cell wider than a width you've asked for,
    and even if it means making the whole table wider.

    This isn't required by the CSS 2.1 spec as far as I can see, but it's
    what they all do.

    This makes overflow: hidden immaterial on a table-cell. You can set it,
    but it won't make any difference, because they never overflow.

    There is a way to achieve the effect of overflowing table cells by
    putting divs inside the table cells and setting width and overflow on
    those instead. e.g.:

    <head>
    <style type="text/css">
    table
    {
    font-size: large;
    border: 1px solid red;
    }
    td
    {
    border: 1px solid black;
    }
    div
    {
    width: 100px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <div>
    chalchenteric
    </div>
    </td>
    <td>
    <div>
    perspicacious
    </div>
    </td>
    <td>
    <div>
    trichloromethylisothiazilone
    </div>
    </td>
    </tr>
    </table>
    </body>
    Ben C, Nov 3, 2006
    #10
  11. CRON

    CRON Guest

    Thanks for all the replies people. It seems that what I want cannot be
    done with simple css. I guess I'll look at restricting the length of
    words on the input scripts. I'm sure there's a way to insert one of Ben
    C's magic spaces into words over a certain length in PHP.
    Cheers for all the help!
    Ciarán
    CRON, Nov 3, 2006
    #11
    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. Jason Coyne  Gaijin42

    Word wrap line break code and algorithm for c#

    Jason Coyne Gaijin42, Apr 8, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    24,148
    Jason Coyne Gaijin42
    Apr 8, 2004
  2. Joe
    Replies:
    1
    Views:
    707
    Jukka K. Korpela
    Sep 13, 2003
  3. Noozer
    Replies:
    22
    Views:
    29,803
    Noozer
    Jan 17, 2005
  4. =?Utf-8?B?RXJpayBLLiBTY2hpbmRlbGRlY2tlcg==?=

    Export datagrid to Word, force page break

    =?Utf-8?B?RXJpayBLLiBTY2hpbmRlbGRlY2tlcg==?=, Oct 3, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    904
    Steve C. Orr [MVP, MCSD]
    Oct 3, 2006
  5. Replies:
    1
    Views:
    296
    Ben C
    Jun 5, 2007
Loading...

Share This Page