8


1

段落の最初の行を表示

複数行の段落を持つDIVがあります。

段落の最初の行のみを表示し、他の行を非表示にする方法はありますか(jQueryを使用している場合)。

7 Answer


7


これは、(最初​​の行を除いて)段落を白と白にする方法(一種)です:http://jsbin.com/usora4/2/edit

CSSのスニペット:

p { color: white; }
p:first-line { color: black; }


5


これが回答されてからしばらく経ちましたが、ここに例がないことを確認すると、非常にうまく機能します。

    This is above the paragraph.


    This is my text. It has many lines. This is my text.
    It has many lines.This is my text. It has many lines.
    This is my text. It has many lines. This is my text.
    It has many lines.


    This is below the paragraph.





div.excerpt { height:2.2em; overflow:hidden; }
div.excerpt:hover { height:auto; }


3


There is not an outright way to do this by specifying the 最初の行。 CSSを使用してDIVの高さを変更し、最初の行のみを表示することをお勧めします。 私にとって最も簡単な解決策のように思えます。 その後、javascriptで行全体を表示するように変更する場合は、それを使用してDIVの高さを100%に戻します。

編集:私は訂正しました、私は最初の行の擬似クラスがあったことを知りませんでした。 ただし、高さを変更するのが最も簡単な方法です。


2


JavaScript、高さの測定、可視性の変更は不要です。 段落を設定して、インラインで表示し、テキストを折り返さないようにします。 親divのオーバーフローを「非表示」に設定して、段落の残りの行があふれないようにする必要があります。

#wrap {
    overflow: hidden;
    text-overflow: ellipsis;
}
p {
    display: inline;
    white-space: nowrap;
}​


1


ここにアイデアとして追加するだけです。 テキストボックスでテキストの表示と非表示を切り替えることができます。 CSSのみ。

p.bar { font-size:0; margin:0;padding:10px;background: #ddd; -webkit-transition: font-size .25s;transition: font-size .25s;
}
p.bar:first-line { font-size:20px; }
input:checked + label  + p.bar {font-size: 20px;}
showPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus


0


行の高さを決定し、1行のみが表示されるようにdivの高さを設定し、divの「overflow」属性を「hidden」に設定します。


-1


試したことはありませんが、可視性を使用することで少し上手くできるはずです。

   This is my text.  It has many lines. This is my text.
   It has many lines. This is my text. It has many lines.
   This is my text.  It has many lines. This is my text.
   It has many lines.

そしてスタイルを設定します

div.excerpt { visibility: hidden; }
div.excerpt:first-line { visibility: visible; }