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

[CRON]

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

 

[Jim Moe]

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".

 

[CRON]

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.

 

[Ben C]

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.

 

[CRON]

Hi Ben Thanks for the reply,

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

 

[Jim Moe]

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.

 

[Jukka K. Korpela]

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.

 

[Ben C]

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]

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.

 

[Toby Inkster]

"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

 

[Ben C]

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>

 

[CRON]

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