3の実装で複数行のテキストのオーバーフロー少しポイント

レンダリング：
<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタのcharset = "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
    ボディ{ 
        フォント：14px / 22px "微軟雅黒" ; 
    } 
    P- { 
        幅：300ピクセル; 
        マージン：は50px自動; 
    } 


    / * 行数が進むを超えた場合、複数行のテキストを越え... :(プログラム、テキスト不明のいくつかの行に適用され...ショー） * /
    .test1 { 
        -webkitラインクランプ：3 ;     / * 表示されたテキスト要素のブロック内の行の数を制限する* / 
        / * ディスプレイ：-webkit-ボックス; / *は、弾性伸縮としてオブジェクトのプロパティと組み合わされなければなりません表示ボックスモデル* /   
        表示：-webkit-ボックス;     / * 弾性ストレッチボックスモデルの表示されるオブジェクトの特性と組み合わされなければならない* / 

        -webkit-ボックスオリエント：縦;     / * 特性が設定または伸縮カートリッジを取り出すと組み合わされなければなりませんオブジェクトの子要素の配置* / 
        オーバーフロー：隠された; 
　　　　　　ワード-BREAK ：BREAK-すべて; 
    } 



    / * 複数行のテキストを超えた...知ら表示テキストに適用:(第2の方式は確かに開いていない）* / 
    .test2{ 
        位置：相対; 
        行の高さ：20ピクセル、
        最大高さ：40ピクセル;    / * 半分防止するテキスト表示の行の高さの整数倍に設定し、最大高さ/高さ* / 
        オーバーフロー：隠された; 
    } 

    .test2後:: { 
        内容："..." ; 
        位置：絶対; 
        右：0 ; 
        下：0 ; 
        パディング左：20ピクセル;
        背景：（右、透明、＃1 FFF 55％）の線形勾配; 
    } 
    / * 複数行のテキストは三つのプログラムを超える... * / 
    .test3 { 
        / * JavaScriptを使用して実装* / 
    } 
    </ スタイル> 
    < スクリプト> 
    ウィンドウ.onload = 関数（）{
         VAR oTxt = のdocument.getElementById（" TXT " ）;
         関数サブ（NUM）{ 
            oTxt.innerHTML = oTxt.innerHTML.substring（0 、NUM）; 
        } 
        小（60 ）; 
    }; 
    </ スクリプト> 
</ ヘッド> 
< 身体> 
    < p型クラス= "TEST1" > BaiduのBaiduの百科事典は、会社は、そのベータ4、2006をオープンコンテンツ、フリー百科事典ネットワークプラットフォームを立ち上げていますライン上の1月20日、2008年4月21日リリースの公式バージョンは、2014年11月の時点でエントリー数が10万人に達している含まれていました。
Baiduの百科事典は、中国の情報収集プラットフォームの様々な分野をカバーする知識を作成することを目的とします。ユーザの関与と献身にBaiduの百科事典の重点は、完全にインターネットユーザーのパワー、収束に数百万人のユーザーの知恵の心を動員し、積極的に交流と共有を行いました。一方、百度BaiduのBaiduの百科事典と組み合わせるの実現は、異なるレベルのユーザーの情報ニーズを満たすために、検索を知っています。</ p型> 
    < p型クラス=「TEST2」> BaiduのBaiduの百科事典は、同社が2008年4月に、ライン上で2006年4月20日に正式版をオープンコンテンツ、フリー百科事典ネットワークプラットフォーム、そのベータ版を立ち上げています21のリリースは、2014年11月の時点でエントリー数が10万人に達している含まれていました。
Baiduの百科事典は、中国の情報収集プラットフォームの様々な分野をカバーする知識を作成することを目的とします。ユーザの関与と献身にBaiduの百科事典の重点は、完全にインターネットユーザーのパワー、収束に数百万人のユーザーの知恵の心を動員し、積極的に交流と共有を行いました。一方、百度BaiduのBaiduの百科事典と組み合わせるの実現は、異なるレベルのユーザーの情報ニーズを満たすために、検索を知っています。</ p型> 
    < p型クラス=「Test3は」> < またがる上記のid =「TXT」を> BaiduのBaiduの百科事典は、同社が2008年4月に、ライン上で2006年4月20日に正式版をオープンコンテンツ、フリー百科事典ネットワークプラットフォーム、そのベータ版を立ち上げています月2014年11月のように21のリリースは、エントリの数が10万人に達している含まれていました。
Baiduの百科事典は、中国の情報収集プラットフォームの様々な分野をカバーする知識を作成することを目的とします。ユーザの関与と献身にBaiduの百科事典の重点は、完全にインターネットユーザーのパワー、収束に数百万人のユーザーの知恵の心を動員し、積極的に交流と共有を行いました。一方、百度BaiduのBaiduの百科事典と組み合わせるの実現は、異なるレベルのユーザーの情報ニーズを満たすために、検索を知っています。</ スパン> < スパン> ... </ スパン> </ P > 
</ ボディ>     
</ HTML >
転載：https://www.cnblogs.com/jiujiaoyangkang/p/4950377.html
3の実装で複数行のテキストのオーバーフロー少しポイント

おすすめ
