0

私はこのスニペットを持っています:

    <div>
       <p class="one">
          a long text that wrap in multiple rows. Lorem ipsum dolor sit amet, 
          consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
          ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          obcaecat cupiditat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.
       </p>
    </div>

長いテキストは div で折り返されます。Div タグの幅は 565px です。したがって、div 内のテキストは、テキストを折り返すため、複数の行 (行) で表示されます。

最初の行だけがハイパーリンクになるようにしたい。

だから、私はこれを取得したいと思います:

    <div>
       <p class="one">
          <a href="#">a long text that wrap in multiple rows. Lorem ipsum dolor sit amet, </a>
          consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
          ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          obcaecat cupiditat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.
       </p>
    </div>

更新 私はこれをテストしています:

<html>
<head>
<style type="text/css">
a:first-line
{
    color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
<a href="#">a long text that wrap in multiple rows. Lorem ipsum dolor sit amet,
              consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
              ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
              obcaecat cupiditat non proident, sunt in 
              culpa qui officia deserunt mollit anim id est laborum.</a>
</body>
</html>

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstlineから

しかし、うまくいかないようです。疑似セレクターの最初の行がハイパーリンクタグで機能しないのはなぜですか?

4

2 に答える 2

0

ブラウザの幅に応じて、div 内のテキストが自動的に折り返されます。DOM 要素への参照を取得し、「clientWidth」プロパティを使用して段落の最初の行の長さを評価できます。段落内の各単語を繰り返し処理し、clientWidth が div 幅を超えている条件を評価します。

于 2012-05-14T12:36:08.437 に答える
0

プレゼンテーション目的でのみ取得したいので、リンク内のすべてのテキストをラップし、CSS で最初の行のリンクの外観のみを与えることができます。CSS で何かをリンクに変換することはできません。

于 2012-05-14T12:40:10.117 に答える