Geek Answers Handbook

Using Javascript or CSS, how can I add extra space at the end of a block of text, but only if it doesn't start on a new line?

Say I have a text with a link (more)... at the end of each paragraph. As a result, it looks something like this:

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

Now I would like to add a space between the link and the paragraph text, so I move the link to the <span> and push it to the right with margin-left: 10px :

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

The problem here is that if the text is wrapped correctly, especially since it appears on the second line by itself, it will look like an indent:

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

When the required 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?

Note: This effect can be achieved by removing the <span> and using the   characters to direct more links to the right with proper text wrapping, but I would like to avoid this if there is no other choice. Or I could use Javascript to insert   up to a range, but this is not a good solution.

+4
source share
3 answers

You can set the width to paragraph and then put the span to the right.

Thus, (more...) always remains on the right.

Not quite what you need, but I think it looks decent.

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

+1
source

If you bind the content to the link in the span and apply margin-right to it, you will get the desired effect. (Unfortunately, this is also not a good solution)

+1
source

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

[div 1 a lot of text, ie: 300px] [div 2 (more ...) for example: 40px]

It will look perfect every time. You will have to play with him to look right, but it will work. Then you can just do a little jQuery when you click more ... to show the rest and hide the "more."

0
source

More articles:


All Articles