By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,089 Members | 2,069 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,089 IT Pros & Developers. It's quick & easy.

How To Wrap Text With CSS

P: 5
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
Share this Question
Share on Google+
18 Replies


Expert 100+
P: 1,892
Trying using word-wrap: break-word
Apr 4 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
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
Expert 2.5K+
P: 4,059
word-wrap

seems that only IE supports it, or it did when the above resource was written.
Apr 5 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Then it is worthless. Do not use it.
Apr 5 '07 #5

P: 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
Expert 2.5K+
P: 4,059
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

P: 5
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
Expert 5K+
P: 7,435
Again, a reminder, that word-wrap does nothing for any other browser.
Apr 5 '07 #9

Expert 100+
P: 1,892
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

100+
P: 200
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
Expert 5K+
P: 7,435
Change everything in style to style="width:100px"
Apr 19 '07 #12

100+
P: 200
Change everything in style to style="width:100px"
Thank You it worked :-)
Apr 20 '07 #13

KevinADC
Expert 2.5K+
P: 4,059
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

P: 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

P: 1
<td style="WORD-BREAK:BREAK-ALL;"> here is ur data </td>

let me know... :)
Feb 14 '09 #16

Dormilich
Expert Mod 5K+
P: 8,639
if you have long words you can also use the soft hyphen (&#173; or &shy;).
Feb 14 '09 #17

drhowarddrfine
Expert 5K+
P: 7,435
@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

P: 1
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.