Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Can you force a 'break-word' wrap on a td without specifying its width?

Reply
Thread Tools

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

 
 
CRON
Guest
Posts: n/a
 
      11-02-2006
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;">thisisaverylongwordthatdoesnotwrapandstretc hesthecell!</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

 
Reply With Quote
 
 
 
 
Jim Moe
Guest
Posts: n/a
 
      11-02-2006
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)
 
Reply With Quote
 
 
 
 
CRON
Guest
Posts: n/a
 
      11-02-2006

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

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      11-02-2006
On 2006-11-02, CRON <(E-Mail Removed)> 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;">thisisaverylongwordthatdoesnotwrapandstretc hesthecell!</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.
 
Reply With Quote
 
CRON
Guest
Posts: n/a
 
      11-02-2006
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

 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      11-03-2006
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)
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      11-03-2006
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/

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      11-03-2006
On 2006-11-02, CRON <(E-Mail Removed)> 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.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      11-03-2006
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

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      11-03-2006
On 2006-11-03, Toby Inkster <(E-Mail Removed)> 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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Nike air force one, air force 1, air force one low cut, air force one abdul_razak@indiatimes.com Digital Photography 2 12-31-2008 04:29 PM
Nike Air Force Ones,Air Force One Air Force One-1 lky52193@gmail.com Computer Support 0 01-17-2008 04:40 PM
Nike Air Force Ones,Air Force One Air Force One-1,25th anniversary lky52112@gmail.com Digital Photography 0 01-15-2008 04:46 PM
Nike Air Force Ones,Air Force One Air Force One-1,25th anniversary lky52112@gmail.com Digital Photography 0 01-15-2008 04:34 PM
Wrap computer components in bubble wrap? Ickshka Computer Support 7 05-05-2006 05:54 PM



Advertisments