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?
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...)
I开发者_如何学运维s 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  
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  
's before the span, but that's not exactly a nice solution either.
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/
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)
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 i.e.: 300px] [div 2(more...) i.e.: 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'.
精彩评论