I'm working on a little something, and I'm trying to create a div that automatically overflows to the right and/or bottom depending on what the user selects. Though the only problem I'm having is that it only overflows if there is a single line with NO spaces. I need it to overflow even on regular words (like a code editor program).

Code I'm using is:


The problem is if the user inputs something like this:

With no spaces and or breaks it overflows - that's fine and dandy, that's how I want it.

BUT...

If the user inputs something like this:

Note that there are no breaks in this - just spaces. The user never hit enter/return one time. I want it (being ONE LINE in a code editor that doesn't have word wrap on) to OVERFLOW to the right, not word wrap down.

It seems the overflow property only works for things that are too big (ie one line with no spaces, or a huge picture, etc). Is there a way to basically get
the div to do this:



Like a text editor?

As far as I have noticed, text will always overflow if it consists out of one word. I haven't ever seen a solution for that, and now you want the opposite

Try:



More info is found on: White-space property definition

Thanks, Liqfan - I'll try that out when I get a chance in a little bit. I'll post again with an update. At work right now so it might take me a while.

You're amazing. I couldn't ever find anything on that! Thanks!

No problem, glad I could help.

If you're wondering what I needed it for you can go to

http://thinkcreactive.com/CODE/

I am creating a code box that has line #'s on the side. If the text wrapped, the line #'s were messed up so I needed it to -always- continue to the right side, so that it will line up with the line #'s like it would inside of a text editor. Now a single line of code will appear on a single line, instead of wrapping and being on 2+ lines if it's longer than the width of the box.

Obviously I will make it look prettier (the form) before releasing it - have to make a site first, but so far so good. Just input the code, name, author, line's to highlight, box width, height (if there is one), and colors (leave colors blank for now, as when I release it i'll have a table showing which colors are which spots), and then hit submit.

Right now it just shows the output, but when released it will give the user a copy & pasteable code that they can put into their site, showing the existing code box.

EDIT: Might want to input a longer code.. Like go to youtube.com and copy and paste the source code or something.

Working like a charm. Tested it with the source code of zymic and your first post, gave a very long code line and it outputted it correctly

Thanks

I hope to add some syntax coloring things before release, but don't quite know how that will work without making it too complicated for the user (having to choose a diff color for each type of code that's being colored).

Maybe I'll make a basic and and an advanced or something.

Now to design an actual site... that's the hard part. I suck at design :\

I'm not that good either, else i'd help a little