1

wordpress ブログのインデックス ページで詳細を読むためのリンクがあります。指定された参照コードとして < p > タグ内に挿入されます。

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

今、このように 2 行目に表示されるように、リンクのスタイルを設定したいと思います...

ここに段落テキスト...assages、そして最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker のようなデスクトップ パブリッシング ソフトウェアを使用しています。

続きを読む

どのスタイルを適用する必要があるかについては、あまりわかりません。いくつかの可能なスタイルを試してみましたが、どれも正しく機能していないようです。スタイルdisplay:blockをリンクに適用すると、2行目に移動しますが、ブロックが行全体のスペースを占めていることがわかっているため、領域全体がクリック可能になります。

4

3 に答える 3

2

display:table自分自身を新しい空の行に強制しながら、コンテンツにシュリンクラップします。

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

いくつかのスタイリングの例：http： //jsfiddle.net/SNUpD/6/

古いInternetExplorerは、おそらくzoom:1+display:inlineまたは同様のものを使用する代替ソリューションを必要とする場合があります。

より良いIEソリューションを作成することはできませんでしたが、残念ながらRead more2行に折り返されています：http： //jsfiddle.net/SNUpD/9/

*display: inline;
*zoom: 1;
*margin: 2em 100em 2em 2em; /* force line breaks with insane right margins */
于 2012-05-19T18:21:38.040 に答える
1

以下を使用して設定display: blockします。a

a {
    display: block;
} ​

この例を参照してください

于 2012-05-19T18:20:42.090 に答える
0 
p a.more-link{
    display: block;
}
于 2012-05-19T18:24:08.107 に答える