CSS - テキスト表示の省略記号でdivのオーバーフローセクション

省略記号の表示と、内側のdivテキストオーバーフローセクションには、2つのソリューションにまとめることができるように、1つのアプローチを解決するためにCSSを使用することで、別のアプローチは、JSを解決することです。

CSSによってまず、表示制御

本部はライン、過剰表示省略記号を表示します

divの表示を複数行、過剰表示省略記号

コード：

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル>例</ タイトル> 
        < スタイル> 
            / * 行のテキスト表示楕円を終了* / 
            .div1 { 
                高さ：100pxに、
                幅：100pxに; 
                背景：緑;  
                テキストオーバーフロー：省略記号;   / *省略記号：テキストを表現するために与えられた文字列をトリミングされています剪定テキスト文字列を表すために省略記号を表示する* /  
                ホワイト・スペース：NOWRAP ;    / * NOWRAP：折り返しのない段落内の指定したテキスト    * /  
                オーバーフロー：隠されたが;  / * 超える部分を非表示* / 
            } 
            / * 複数行のテキスト表示楕円を終了* / 
            .div2 { 
                / * 高さ：100pxに; * / 
                幅：100pxに、
                背景：黄緑色;  
                ディスプレイ：-webkit-ボックス;   / *  表示：-webkit-ボックス、プロパティはボックスモデルオブジェクトと組み合わせなければならないなどの弾性伸縮表示   * / 
                -webkit-ボックス-オリエント：縦;  / *   -webkit-ボックス必要オリエント結合特性、設定または取得するオブジェクトの伸縮カートリッジサブ要素の配置   * / 
                -webkitラインクランプ：5 ;  / *   表示されたテキスト要素を制限するためのライン-webkitラインクランプブロックの数* / 
                オーバーフロー：隠された; 
            } 
        </ スタイル> 
    < / ヘッド> 
    < 身体> 
        < divのクラス=「DIV1」> 
            ハッハッハハッハッハハッハッハハッハッハハッハッハハッハッハハッハッハハッハッハハッハッハ
        </ 本部> 
        < divのクラス=「DIV2」 > 
            やあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあやあ
        </ DIV > 
    </ ボディ> 
</ HTML >

結果：

JSによって、第2、表示制御

 コード：

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル>实例</ タイトル> 
        < スタイルタイプ= "テキスト/ CSS" > 
            .mydiv { 
                幅：150ピクセル。
                高さ：200pxの。
                背景：ピンク; 
            } 
        </ スタイル> 
    </ ヘッド>
    ボディ> 
        < DIV クラス= "myDiv" ID = "デモ" >方法によって操作表示テキストJS、その結果、テキスト表示の終了省略記号</ DIV > 
        < スクリプト> 
            VAR myBox = のdocument.getElementById（' デモ' ）; // オブジェクト直接DOMO IDの取得
            VAR mydemoHtml = （myBox.innerHTML.sliceを0 、20 ）+  ' ...... ' ; // スライス（）メソッド既存の配列から選択された要素を返し
            myBox.innerHTML = mydemoHtml; //指定された場所に充填された
        </ スクリプト> 
    </ ボディ> 
</ HTML >

 

結果：