css/html: white space break fix and now cant code fine?

Yes, so I got the 开发者_如何学Cproblem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.

Example: http://jsfiddle.net/r3CFJ/

I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence: http://jsfiddle.net/r3CFJ/1/

How can I fix this please any solutions?? as my further coding will get very ugly and not readable?

You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).

If you remove the CSS it looks just fine on 1 line.

Look: http://jsfiddle.net/r3CFJ/10/

Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.

You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.

Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)

If you want the image and text will be inline set a or fancybox_vid to be position:absolute;

Example http://jsfiddle.net/huhu/r3CFJ/30/