468,275 Members | 1,853 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,275 developers. It's quick & easy.

How To Wrap Text With CSS

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. </head>
  7.  
  8. <body>
  9. <table width="777" border="0" cellspacing="0" cellpadding="0">
  10.   <tr>
  11.     <td>gdgdgdfgdf</td>
  12.     <td style="clear:right">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
  13.   </tr>
  14. </table>
  15. </body>
  16. </html>
  17.  
How can i able to arrange this text to wrap using css. Anyone help me pls
Apr 4 '07 #1
18 265433
AricC
1,892 Expert 1GB
Trying using word-wrap: break-word
Apr 4 '07 #2
drhowarddrfine
7,435 Expert 4TB
word-wrap? What's that?

You have to play with the width of table and the width of the rows and cells.
Apr 5 '07 #3
KevinADC
4,059 Expert 2GB
word-wrap

seems that only IE supports it, or it did when the above resource was written.
Apr 5 '07 #4
drhowarddrfine
7,435 Expert 4TB
Then it is worthless. Do not use it.
Apr 5 '07 #5
word-wrap

seems that only IE supports it, or it did when the above resource was written.

Thanks for the suggestion. It works with <div> and <p> but if i use inside table word is not wrapping.

Any suggestions pls
Apr 5 '07 #6
KevinADC
4,059 Expert 2GB
it seems to work if you define the properties in the TD cell:

<td style="word-wrap: break-word" width="100">
Apr 5 '07 #7
it seems to work if you define the properties in the TD cell:

<td style="word-wrap: break-word" width="100">
Thank you very much it works fine.
Apr 5 '07 #8
drhowarddrfine
7,435 Expert 4TB
Again, a reminder, that word-wrap does nothing for any other browser.
Apr 5 '07 #9
AricC
1,892 Expert 1GB
Again, a reminder, that word-wrap does nothing for any other browser.
Huh, I should have checked the compatible browsers sorry karthi.
Apr 5 '07 #10
ismailc
200 100+
it seems to work if you define the properties in the TD cell:

<td style="word-wrap: break-word" width="100">
Hi,

I am struggling with the same problem using Coldfusion 5 where I want to cut off the text and not allowing for text wrap in my column.

<td style="word-wrap: break-word" width="100" align="left">#test#<td>

I used the previous example but unfortunately it does not work.

Any help please!

Thank You
Apr 19 '07 #11
drhowarddrfine
7,435 Expert 4TB
Change everything in style to style="width:100px"
Apr 19 '07 #12
ismailc
200 100+
Change everything in style to style="width:100px"
Thank You it worked :-)
Apr 20 '07 #13
KevinADC
4,059 Expert 2GB
You don't want the text to wrap?

<td nowrap>text</td>

there might be a CSS equivalent to the nowrap attribute. Note that nowrap is a stand alone attribute, there is no "=value" part.
Apr 20 '07 #14
elgreg
3
You don't want the text to wrap?

<td nowrap>text</td>

there might be a CSS equivalent to the nowrap attribute. Note that nowrap is a stand alone attribute, there is no "=value" part.

According to w3.org "nowrap" is deprecated. You should be using <td style="white-space:nowrap;">Cell Contents</td> I've found this to work in both IE6 and FF 2.x without having to specify a column width.
Apr 23 '07 #15
navink
1
<td style="WORD-BREAK:BREAK-ALL;"> here is ur data </td>

let me know... :)
Feb 14 '09 #16
Dormilich
8,651 Expert Mod 8TB
if you have long words you can also use the soft hyphen (&#173; or &shy;).
Feb 14 '09 #17
drhowarddrfine
7,435 Expert 4TB
@navink
Wonderful. Another non-existent solution with a non-existent property to a 2-year old thread.

Actually, that property now exists in CSS3 but it's not supported by any browser.
Feb 14 '09 #18
Here is the generic solution that i found:

In CSS:

Expand|Select|Wrap|Line Numbers
  1. .wrapword{
  2.  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  3.  white-space: -pre-wrap;      /* Opera 4-6 */
  4.  white-space: -o-pre-wrap;    /* Opera 7 */
  5.  white-space: pre-wrap;       /* css-3 */
  6.  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  7. }

Anywhere in HTML:
Expand|Select|Wrap|Line Numbers
  1. <td class="wrapword"> ... </td>
Dec 7 '10 #19

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Mark P | last post: by
1 post views Thread by Diego | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by zattat | last post: by
1 post views Thread by MrBee | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.