...

View Full Version : how to get text to wrap?



cyborg360
12-16-2009, 05:26 AM
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?

Dean440
12-16-2009, 05:27 AM
For the div containing the paragraph:


overflow: auto; or

overflow: hidden;

cyborg360
12-16-2009, 06:02 AM
Not quite working for me. Is this correct:


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

vineet
12-16-2009, 06:12 AM
if you have long words without space then i think,
you would need javascript to wrap those long words in specified width.

vineet

Dean440
12-16-2009, 06:20 AM
Not quite working for me. Is this correct:


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


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

cyborg360
12-16-2009, 06:21 AM
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.

Dean440
12-16-2009, 06:24 AM
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:

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum