Using Javascript or CSS, how can I add additional space at the end of a block of text, but only if it does not start on a new line?

Question

Let's say I have some text, with a (more)... link at the end of each paragraph. It ends up looking something like this:

This is just a test paragraph. Click on the more link for more info. (more...)

Now I'd like to add some space between the link and the paragraph text, so I wrap the link in a <span> tag and push it to the right with a margin-left: 10px :

This is just a test paragraph. Click on the more link for more info.     (more...)

The problem here is, if the text wraps right on the more so that it shows up on a second line by itself, it will look indented:

This is just a test paragraph. Click on the more link for more info. Push it down!
     (more...)

When the desired output should be:

This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)

Is it possible to achieve this effect using either Javascript or CSS?

Side note: It is possible to achieve this effect by removing the <span> tag and using &nbsp characters to push the more linke to the right with proper text wrapping, but this is a solution I'd like to avoid unless there is no other choice. Or I could use Javascript to insert the &nbsp 's before the span, but that's not exactly a nice solution either.

Answer 1

If you wrap the content before the link in a span and apply a margin-right to that, you'll get the desired effect. (Unfortunately, this, too, is not really a nice solution)

Answer 2

You could set a width on the paragraph and then float the span to the right.

That way the (more...) remains on the the right always.

Not exactly what you are after but I think it looks decent.

Example: http://jsfiddle.net/WFuBd/1/

Answer 3

Why not use 2 div's. Div one floats left, div two floats right... Make sure overflow=hidden on div one, and (more...) is on div two.

[div 1 lots of text ie: 300px] [div 2(more...) ie: 40px]

It will look perfect every time. You'll have to play around with it to look right, but it'll work. You could then just do a little jQuery when you click more...to show the rest and hide 'more'.