Forum Moderators: not2easy

Message Too Old, No Replies

Div wrap text problem

         

andrewsmd

1:00 pm on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm rather new to CSS and front end web based programming, you need back end PHP help or security help, I'm your man. Trying to make things look pretty is not my forte so bear with me. I output a text file to an html page with CSS. Basically what my php does is take in the file path and split text and displays an inline text file with carriage returns based on the split text the user inputs. The problem is, some of these lines are longer than a normal monitor can show. Just image you created a web page and typed aaaaaaaaaaaaaaaaaaaaa for so long the user had to scroll over to see all of the a's. How to I make this div a definite size so it will just put anything that goes off the screen on the next line. What I mean is once the aaaaaaaaaaaaaaaaa hits the end of the screen it would put in an automatic return and move the rest of them to the next line. Here is the div the output goes into. Thanks,

#output{
background-color: #ccccc9;
border: #006595 groove 2px;
}

PhotoJoe

3:02 pm on Jul 17, 2008 (gmt 0)

10+ Year Member



I'm not sure but, I think this would do what you want.


[3]
#output{
[b]width: 40em[/b];
background-color: #ccccc9;
border: #006595 groove 2px;
}
[/3]

You can make the width size you want. "em" is about the size of one normal chacter.

HTH

PhotoJoe

andrewsmd

4:15 pm on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I had already tried setting the width the problem is, if the text is longer than the div it just goes outside of it. I don't know if this is because the HTML is generated by PHP or what, any other ideas.

Fotiman

4:27 pm on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




How to I make this div a definite size so it will just put anything that goes off the screen on the next line.

What you're asking for does not exist. You are out of luck. With non-breaking text (no whitespace), the user will have to scroll to see it all.

If you really wanted to, you might be able to use some JavaScript to examine all of your values and determine whether or not they will cause scrolling, then edit them with JavaScript to insert a break. It's not elegant, but you're not going to be able to solve this problem with CSS alone.

And no, this has nothing to do with PHP.

[edited by: Fotiman at 4:27 pm (utc) on July 17, 2008]

andrewsmd

5:25 pm on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well I'll just leave it then because I have two widescreen monitors so it won't be an issue for me. Thanks for all of your help