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 &nbspcharacters 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

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/