HTML Editor 2008 - Help! is this...

User 465126 Photo


Registered User
40 posts

Hey all, I wanna have text content inside a div of about 200 px wide, but I want the text to have an automatic line break when it reaches the edge of the div. If I keep typing, the text just keeps going on the same line because the div just keeps expanding. So is there any way to keep the div from expanding and maybe have automatic line break through CSS? Thanks
User 132952 Photo


Ambassador
3,120 posts

I thought I'd check out code from VSD since it seems to do this. It looks as though it simply puts the text in a table within the div tag and for each line, end it with the <br> tag. Basically, like this (although more parameters in the real deal, I'm sure), but just to give you the general idea:
<div><table><tr><td>
Hello<br>
This is a test<br>
Keeping it simple<br>
</td></tr></table></div>
User 465126 Photo


Registered User
40 posts

Adam R. wrote:
I thought I'd check out code from VSD since it seems to do this. It looks as though it simply puts the text in a table within the div tag and for each line, end it with the <br> tag. Basically, like this (although more parameters in the real deal, I'm sure), but just to give you the general idea:
<div><table><tr><td>
Hello<br>
This is a test<br>
Keeping it simple<br>
</td></tr></table></div>

I just tried that and its a no go. It still stretches to accommodates text :(
User 132952 Photo


Ambassador
3,120 posts

Well, if you add <br> where you want text to stop (move to the next line), I don't see how it would continue to stretch on one line. It's more manual work though to do that versus a box forcing a set width for you though (which I'm not sure how to do, if possible).
User 465126 Photo


Registered User
40 posts

Yeah. Manually it is possible. I was just wondering if there was a way to make a div stop stretching. Kinda like the text would be hitting a brick wall and then I would know to hit enter (break) to start a new line.
User 463058 Photo


Ambassador
1,073 posts

Supposing you had a div and content like this...

<div><p>A bunch of text...</p> ...(more content after the text)... </div>

...you could add an id or class to the div like as follows.

<div class="sidenote"><p>A bunch of text...</p> ...(more content after the text)... </div>

If the div only contains the text, then you can drop the div and just use this:

<p class="sidenote">A bunch of text...</p>

Either way you can use styling like this:

.sidenote {
width:200px;
}
User 465126 Photo


Registered User
40 posts

That's exactly what I did. I was able to figure it out. So now I have a functional vertically scrolling update type column. I used the div ID with an auto overflow as well. Thanks!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.