レイアウトCSS - テキストオーバーフローテキストのオーバーフロー:省略記号。

単一行テキストのオーバーフロー:

オーバーフロー:隠されました;
テキストオーバーフロー:省略記号。
ホワイトスペース:NOWRAP。

テキストオーバーフローの複数行:

表示:-webkit-ボックス。
オーバーフロー:隠されました;
テキストオーバーフロー:省略記号。
-webkitラインクランプ:3。
-webkit-ボックスオリエント:縦;
 
効果:
コード:
        .pBox { 
            幅:200pxの。
            概要:1pxの固体赤。
            マージン:100pxに自動; 
        } 

        .pBox> P:最初の子{ 
            オーバーフロー:隠されました。
            テキストオーバーフロー:省略記号。
            ホワイトスペース:NOWRAP。
            マージン下:20ピクセル; 
        } 

        .pBox> P:最後の子{ 
            表示:-webkit-ボックス。
            オーバーフロー:隠されました; 
            テキストオーバーフロー:省略記号。
            -webkitラインクランプ:3。
            -webkit-ボックスオリエント:縦; 
        } 


    <DIV CLASS = "PBOX"> 
        <P>
            距離でたときに、「あなたは涙にしたい」経験した人々はその痛みを理解するだろう。この偽善的な文言構造は言いようのないです。私は人は密かにあなたのマイクロブログを見ているとき、あなたはあなたが本当に移動しませんでした聴覚障害者はなかったに値しますあなたは曲が、我々はそれが今実際には非常に鮮やかに聞こえるあまりに不自然歌うことは耳が寛容になるようにする時間であるかもしれない聞いて座って一日でとても聞き覚え放送
        </ p型> 
        <p型> 
            時間の距離に、「あなたは涙にしたいです。」経験した人々はその痛みを理解し、この偽善的な文言構造は、言いようのないです。私はあなたが人は密かにあなたのマイクロブログは、あなたの歌は私たちが一緒に同じ日に聞いて座るように聞き覚え放送を見ているとき、あなたが本当に移動しませんでした聴覚障害者はなかったに値しますそれは耳が寛容になるようにする時間であるかもしれない非常に鮮明なサウンドを今もあまりにも不自然な歌です
        。</ p型> 
    </ div>

  

 

おすすめ

転載: www.cnblogs.com/qlongbg/p/11607631.html