Question

我有一个链接，可以在wordpress博客索引页面上阅读更多内容。它被插入＆lt; p> tag作为给定的参考代码。

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

现在我想设置链接的样式，使其显示在第二行中，就像这样......

这里的段落文本......以及最近使用Aldus PageMaker等桌面出版软件，包括Lorem Ipsum的版本。

我很少知道应该采用什么样的风格。我尝试了几种可能的样式，但它们似乎都没有正常工作。如果我应用样式显示：阻止链接，然后它进入第二行，但随后整个区域变为可点击，因为你知道它占用整个行空间。

Answer 1

display:table将收缩包装到内容，同时强制自己换到新的空行：

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

一些样式的示例： http://jsfiddle.net/SNUpD/6/

较旧的Internet Explorer可能需要使用zoom:1 + display:inline或类似内容的替代解决方案。

我无法做出更好的IE解决方案，不幸的是它将Read more包装成两行： http://jsfiddle.net/SNUpD/9/

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

Answer 2

使用：

在display: block上设置a

a {
    display: block;
}

请参阅此example

Answer 3

p a.more-link{
    display: block;
}

显示链接包含在p内的新链接？

3 个答案: