エフェクトゴールグラフ：
これは、ソースコードで、達成することは非常に簡単です：
<！DOCTYPE HTML > < HTML > < ヘッド> < メタのcharset = "UTF-8" /> < タイトル>点击查看全文</ タイトル> < スクリプトSRC = "https://cdn.bootcss.com/jquery/3.4.1 /jquery.min.js」> </ スクリプト> < スタイルタイプ= "テキスト/ cssの" > * { パディング：0 ; マージン：0 ; } 。60％ 。 マージン：0自動; 背景：#ecebeb 。 パディング：10pxの; } .showAll .TITLE { フォントサイズ：20ピクセル。 フォント重量：太字; 色：＃1 af0015 。 } .showAll .author { 色：＃1 a1a1a1 。 マージン：12ピクセル0 ; } .showAll .content { 表示：なし。 //テキストが表示されていないことに注意するように } </ スタイル> < スクリプトタイプ= "テキスト/ JavaScriptを" > $（ドキュメント）.ready（関数（）{ $（" .showContent " ）.click（関数（）{ // ときクリックされたときにボタン「全文を展開する」 $を（「.content 」）.SHOW（）; //は、一部が完全に表示されていないことを示している $（この）.parent（）非表示（）;. // ここにメモして隠されたテキストの簡単な説明、その結果を隠していない後、最後に省略記号を持っている本来のテキストは、まだ省略記号が配備されているということですので }）; $（「.hideContent 」）.click（機能（）{ // ときにクリックされたときにボタン"フルテキストを隠す" $（この）.parent（）非表示（）;. // すでにテキスト表示非表示 $（" .showContent " 。）.parent（）ショー（）; // テキストが表示について簡単に説明する ;）} ）}; </ スクリプト> </ ヘッド> < 身体> < divのクラス= "SHOWALLある" > < P クラス= "タイトル" > インスピレーションの物語 < / P > < Pのクラス= "著者"> 著者：ネットワークから投稿：2014年3月1日 </ p型> < p型> ピーター・Hande現職カーネギー・コーポレーション（デール・カーネギー＆アソシエイツ）社長兼最高経営責任者（CEO）。世界のカーネギー研修会社のリーダーは、世界中の85カ国に160社のオフィスを持っています。 また、氏はピーターやトレーニングなどのようないくつかの大企業の取締役は、どのようにプロの組織の成功の社長を取得するには、彼はそれをどのように成功しますか？最近、グランドハイアット北京のインタビューで記者 最高経営責任者（CEO）は、彼は彼が成功するためにどのように話を聞きました。 氏はピーターは物語を通じて、成功の彼の理解について話しました。彼は痛みが...とき医者に病気のために5歳の時だったと述べた < クラス=「showContent」のhref =「JavaScriptを：無効（0）;」>全文を見る</ A > </ p型> < divのクラス= "コンテンツ" > 氏はピーター・Hande現職のカーネギー・コーポレーション（デール・カーネギー＆アソシエイツ）社長兼最高経営責任者（CEO）。世界のカーネギー研修会社のリーダーは、世界中の85カ国に160社のオフィスを持っています。 また、氏はピーターやトレーニングなどのようないくつかの大企業の取締役は、どのようにプロの組織の成功の社長を取得するには、彼はそれをどのように成功しますか？最近、グランドハイアット北京のインタビューで記者 最高経営責任者（CEO）は、彼は彼が成功するためにどのように話を聞きました。 氏はピーターは物語を通じて、成功の彼の理解について話しました。彼は彼が傷ついた時に病気で、痛みが5歳だったので、彼は医者に行って言った、医者は彼に尋ねた、あなたはほとんどが望むものを、氏ピーターは、私が欲しい医者に言わ 幸せになるために、医師はあなたが幸せであることを、言いました彼がに望んでいる、と彼は本当に幸せでした。だから、氏ピーターは成功したい多くの人々がある、と述べ、多くの人々がどのように、できるだけ早く成功するために彼に尋ねたがあります。彼はあなたが見ておくべきであると考えており 、成功の定義は何か？成功のあなたの定義は、家族の調和ならば、あなたは、より多くの家族との通信より多くの時間を支払い、また、その処理アップグレードするために家族を尋ねた家族間の調和を強化するための方法を考えなければならない 容量の問題を。 氏はピーターは言った：「成功の私の定義は幸せである、私は好きではない事をしないだろうし、中国のことわざの仕事が行く好きではない、 『軒下の人々は、お辞儀をしなければならなかった』、私は状況のようなものが好きではありません。私は好きではないだろう 、私はので、私は5歳の時に非常に成功している、と言って、幸せが成功であると信じているので、やって「 < クラスhideContent 『=』のhref =」JavaScriptを：無効（0）; ">折りたたみテキスト</ A > </ DIV > </ DIV > </ ボディ> </ HTML >
しかし、単に静的以上、それは動的である場合、データの数十万人、今回ダイナミックHTMLを使用する必要が上。
htmlページ内ループのための援助の効果を示す達成する必要があります。（Liが複数のラベルを生成することができ）
そして、上記の問題になります書きます。これは、すべてのクラスは、ラベルのコンテンツの影響が含ま作ります。問題のJSコードのその部分はそう。だから我々は、非表示を変更し、状態がクラスを使用しないでください表示するには、IDを使用する必要があります。
そして、idはインクリメントする方法。しかし、増分を聞かせて、そしてどのようにラベルの増分後にIDを取得することができます。非表示にし、内部を示し、それが書き込まれませんし、上記のコードでIDを取得する必要があるため。。。ないjsが、学ぶ必要があります。
添付さらにCSSコードは、この効果を生成させることができます。
プラス、このような省略記号は、あなたがそれを行う方法読み取りを追加しました
{Pの
幅：600PX;
オーバーフロー：隠された、
テキストオーバーフロー：省略記号;
ディスプレイ：-webkit-ボックス;
/ * - WebKitのラインクランプ：3と、表示省略記号を超えて3ライン部を除去すべての属性* /
LINE-高さ：1.5em;
高さ：4.5em;
オーバーフローY：隠された;
-webkit-ボックス-オリエント：縦;
}
何、この機能を達成するためのjsの制御で制御する他の方法、また、ある程度まで、学ぶために遅くする必要がありますが、あります。(F5H_@_BBBGZ5O.png)