Imagine having some text, and at the conclusion of each paragraph there is a (more)... link. The layout ends up looking like this:
This is just an example paragraph. Click on the more link for additional information. (more...)
Now comes the desire to insert space between the link and the paragraph content, so the solution is to encase the link in a <span> element and adjust its position with a margin-left: 10px:
This is just an example paragraph. Click on the more link for additional information. (more...)
The issue arises when the text wraps right after the 'more,' causing it to appear indented on a separate line:
This is just an example paragraph. Click on the more link for additional information. Continue reading!
(more...)
The intended output should actually be:
This is just an example paragraph. Click on the more link for additional information. Continue reading!
(more...)
Can this effect be achieved using either Javascript or CSS?
Note: While it is feasible to achieve this outcome by eliminating the <span> tag and utilizing   characters to push the 'more' link to the right with correct text wrapping, this is an option that we prefer to avoid unless absolutely necessary. Alternatively, Javascript could be used to add the  's before the span, but this approach may not be ideal either.