Question

I’m having a link for read more on wordpress blog index page. It is inserted inside the < p > tag as the given reference code.

<p>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <a class="more-link local-link" href="http://example.com/">
     <span>Read <span class="red">More</span></span>
  </a>
</p>

Now I want to style the link so as it appears in the second line like this…

---

Paragraph text here…assages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Read More

---

I’m clue less as what style should be applied. I have tried with several possible styles but none of them seems to work correctly. If I apply style display:block to link, then it goes into second line, but then whole area becomes clickable as you know its a block taking up full line space.

Answer 1

display:table will shrink-wrap to content while forcing itself to a new empty line:

a {
    display: table;  /* beware older IEs! */
    margin-top: 1em; /* area above the link won't be clickable */
}

​
Example with some styling:
http://jsfiddle.net/SNUpD/6/

Older Internet Explorers may need some alternative solution using possibly zoom:1 + display:inline or something similar.

I couldn’t make a better IE solution, unfortunately it wraps Read more to two lines:
http://jsfiddle.net/SNUpD/9/

*display: inline;
*zoom: 1;
*margin: 2em 100em 2em 2em; /* force line breaks with insane right margins */