How To Wrap Text With CSS

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • karthi0677
    New Member
    • Mar 2007
    • 5
    #1

    How To Wrap Text With CSS

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="777" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>gdgdgdfgdf</td>
    <td style="clear:right">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
  </tr>
</table>
</body>
</html>
    How can i able to arrange this text to wrap using css. Anyone help me pls
    Last edited by AricC; Apr 4 '07, 10:20 PM. Reason: Please use CODE tags
    Tags: css text-wrap, css textwrap, td wrap
    • AricC
      Recognized Expert Top Contributor
      • Oct 2006
      • 1885
      #2
      Trying using word-wrap: break-word

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          word-wrap? What's that?

          You have to play with the width of table and the width of the rows and cells.

            Comment

            • KevinADC
              Recognized Expert Specialist
              • Jan 2007
              • 4092
              #4
              word-wrap

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

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  Then it is worthless. Do not use it.

                    Comment

                    • karthi0677
                      New Member
                      • Mar 2007
                      • 5
                      #6
                      Originally posted by KevinADC
                      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

                        Comment

                        • KevinADC
                          Recognized Expert Specialist
                          • Jan 2007
                          • 4092
                          #7
                          it seems to work if you define the properties in the TD cell:

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

                            Comment

                            • karthi0677
                              New Member
                              • Mar 2007
                              • 5
                              #8
                              Originally posted by KevinADC
                              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.

                                Comment

                                • drhowarddrfine
                                  Recognized Expert Expert
                                  • Sep 2006
                                  • 7434
                                  #9
                                  Again, a reminder, that word-wrap does nothing for any other browser.

                                    Comment

                                    • AricC
                                      Recognized Expert Top Contributor
                                      • Oct 2006
                                      • 1885
                                      #10
                                      Originally posted by drhowarddrfine
                                      Again, a reminder, that word-wrap does nothing for any other browser.
                                      Huh, I should have checked the compatible browsers sorry karthi.

                                        Comment

                                        • ismailc
                                          New Member
                                          • Sep 2006
                                          • 200
                                          #11
                                          Originally posted by KevinADC
                                          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">#t est#<td>

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

                                          Any help please!

                                          Thank You

                                            Comment

                                            • drhowarddrfine
                                              Recognized Expert Expert
                                              • Sep 2006
                                              • 7434
                                              #12
                                              Change everything in style to style="width:10 0px"

                                                Comment

                                                • ismailc
                                                  New Member
                                                  • Sep 2006
                                                  • 200
                                                  #13
                                                  Originally posted by drhowarddrfine
                                                  Change everything in style to style="width:10 0px"
                                                  Thank You it worked :-)

                                                    Comment

                                                    • KevinADC
                                                      Recognized Expert Specialist
                                                      • Jan 2007
                                                      • 4092
                                                      #14
                                                      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.

                                                        Comment

                                                        • elgreg
                                                          New Member
                                                          • Apr 2007
                                                          • 3
                                                          #15
                                                          Originally posted by KevinADC
                                                          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.

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...