Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    how to get text to wrap?

    Check out this screenshot. Can anyone tell me how to get the text to wrap to stay within the paragraph box? It's even running through the table border; how is this possible?
    Attached Thumbnails Attached Thumbnails how to get text to wrap?-nowrap.jpg  

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    For the div containing the paragraph:

    Code:
    overflow: auto;
    or
    Code:
    overflow: hidden;

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Not quite working for me. Is this correct:

    Code:
    <td>
    		<div overflow: auto;>
    			<p>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
    		</div>
    		</td>
    Do I also have to stop the table from widening automatically? How would you do that?
    Last edited by cyborg360; 12-16-2009 at 06:05 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    if you have long words without space then i think,
    you would need javascript to wrap those long words in specified width.

    vineet

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by cyborg360 View Post
    Not quite working for me. Is this correct:

    Code:
    <td>
    		<div overflow: auto;>
    			<p>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
    		</div>
    		</td>
    Do I also have to stop the table from widening automatically? How would you do that?
    I see you're using tables. That's generally frowned upon. They make loading times slower and are harder to manage (among other things). Also, defining a style inline (that is, defining it just for the one element you're using it for, right in the HTML) is generally frowned upon. The way you're doing it would have you write out the same style for every cell of the table.

    The ideal way to get this done is the have a CSS file separated from the actual content of your page, and to use divs.

    But to just get you started, if you wanted to define the style inline, here's the code in the context of your page:

    Code:
    <td>
    		<div style="overflow: auto;">
    			<p>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
    		</div>
    		</td>

  • Users who have thanked Dean440 for this post:

    cyborg360 (12-16-2009)

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    thanks for the info all. I just broke the words up and now its not expanding the table. Thanks for the tip about tables and the stylesheet too.
    Last edited by cyborg360; 12-16-2009 at 06:27 AM.

  • #7
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by vineet View Post
    if you have long words without space then i think,
    you would need javascript to wrap those long words in specified width.

    vineet
    With margin-auto and a fixed width, a horizontal scrollbar will appear and the width will remain the same.

    @ the O.P.:

    Just for future reference, consider something more like this:

    Here's the CSS:
    Code:
    #container{
    width: 705px;
    margin: 0 auto;
    }
    
    .leftColumn, .rightColumn{
    overflow: auto;
    border: 1px solid #DDD;
    padding: 2px;
    }
    
    .leftColumn{
    float: left;
    width: 500px;
    }
    
    .rightColumn{
    width: 200px;
    }
    Here's the HTML:
    Code:
    <div id="container">
    	<div class="leftColumn">Some data</div> <div class="rightColumn">More data</div>
    	<div class="leftColumn">Some data</div> <div class="rightColumn">More data</div>
    	<div class="leftColumn">Some data</div> <div class="rightColumn">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
    	<div class="leftColumn">Some data</div> <div class="rightColumn">More data</div>
    	<div class="leftColumn">Some data</div> <div class="rightColumn">More data</div>
    	<div class="leftColumn">Some data</div> <div class="rightColumn">More data</div>
    </div>
    Last edited by Dean440; 12-16-2009 at 06:39 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •