前段のテキストオーバーフローの処理、余分な内容の表示ポイント

23076 ワード
先端知識
前段のテキストオーバーフローの処理、余分な内容の表示ポイントtext-overflow:ellipsis属性で単行テキストのオーバーフロー表示省略記号(...)を実現することはよく知られているはずです.もちろん、一部のブラウザでは、幅widthのプロパティが必要です.
css  : overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ， 。 WebKit WebKit （ WebKit ） ， WebKit CSS (WebKit )-webkit-line-clamp  ; :これはCSS に されない です.-webkit-line-clampは、1つのブロック に されるテキストの を するために される.この を するには、 のWebKitプロパティを み わせる があります. の プロパティ:
  • display: -webkit-box;が しなければならない は、オブジェクトを ボックスモデルとして します.
  • -webkit-box-orientが しなければならない は、 ボックスオブジェクトのサブ の を または する.
  • text-overflow: ellipsis;で、 のテキストに できる は、 「...」で のテキストを にします.
    •  
     
    css   :
     
     
       
      
    1. overflow : hidden;
      2.  
      
    2. text-overflow: ellipsis;
      3.  
      
    3. display: -webkit-box;
      4.  
      
    4. -webkit-line-clamp: 2;
      5.  
      
    5. -webkit-box-orient: vertical;
      6.  
     
     
     
            WebKit       （     WebKit   ）   。
     
     
            http://www.css88.com/webkit/-webkit-line-clamp/
     
      
     
    -o-ellipsis-lastline
     
      
     
      Opera 10.60   ，text-overflow        -o-ellipsis-lastline  。            ，             。              ，         //(ㄒoㄒ)//
     
     
     
      
     
        
        
     
          
          
     
           
     
            
     
             [css]  view plain 
              copy 
             
     
              
            
     
           
     
           
       
            
    1. p "font-family:Consolas, Courier, monospace !important;color:#00aa00;">{  
      2.  
            
    2.     "font-family:Consolas, Courier, monospace !important;font-weight:bold;">overflow"font-family:Consolas, Courier, monospace !important;color:#00aa00;">: "font-family:Consolas, Courier, monospace !important;color:#993333;">hidden"font-family:Consolas, Courier, monospace !important;color:#00aa00;">;  
      3.  
            
    3.     "font-family:Consolas, Courier, monospace !important;font-weight:bold;">white-space"font-family:Consolas, Courier, monospace !important;color:#00aa00;">: "font-family:Consolas, Courier, monospace !important;color:#993333;">normal"font-family:Consolas, Courier, monospace !important;color:#00aa00;">;  
      4.  
            
    4.     "font-family:Consolas, Courier, monospace !important;font-weight:bold;">height"font-family:Consolas, Courier, monospace !important;color:#00aa00;">: "font-family:Consolas, Courier, monospace !important;color:#993333;">3em"font-family:Consolas, Courier, monospace !important;color:#00aa00;">;  
      5.  
            
    5.     text-overflow"font-family:Consolas, Courier, monospace !important;color:#00aa00;">: -o-ellipsis-lastline"font-family:Consolas, Courier, monospace !important;color:#00aa00;">;  
      6.  
            
    6. "font-family:Consolas, Courier, monospace !important;color:#00aa00;">}  
      7.  
            
    7. ​  
      8.  
           
     
          
    		 
        
     
            
      
     
     
     
     
    Demo: http://jsfiddle.net/Cople/ash5v/
     
     
     
     
             
     
     
                          ，      (…)       ；
     
     
      ：
     
     
       
     
    css   :  p {    position:relative;    line-height:1.4em;    /* 3 times the line-height to show 3 lines */    height:4.2em;    overflow:hidden;    }    p::after {    content:"...";    font-weight:bold;    position:absolute;    bottom:0;    right:0;    padding:0 20px 1px 45px;    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;    }     demo：http://jsfiddle.net/feiwen8772/qaxh927w/1/?utm_source=website&utm_medium=embed&utm_campaign=qaxh927w        ：  
  •  height     line-heightの3 .
    •   
  •               png       ，        ；  
    •   
  •  IE6-7   contentのコンテンツなので、IE 6-7を   するには、...でシミュレーションするなど、コンテンツにラベルを  することができる.
    •   
  •     IE8，   ::afterは:afterに き えられた.
    •   JavaScript      js             ，      ，               ：  1.Clamp.js         ：https://github.com/josephschmitt/Clamp.js       ：  
    jsコード:
    var module = document.getElementById("clamp-this-module");   
    $clamp(module, {clamp: 3});   
    2.jQueryプラグイン-jQuery.dotdotdot 
    これも いやすいです.
    jsコード:
    $(document).ready(function() {   
    $("#wrapper").dotdotdot({   
    //configuration goes here   
    });   
    });   
    ダウンロードおよび  ドキュメントのアドレス:https://github.com/BeSite/jQuery.dotdotdotまたはhttp://dotdotdot.frebsite.nl/
       :http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsershttp://css-tricks.com/line-clampin/
     はjsスクリプトの    です(  の さが   の さより さいまで、    を ろから へ  します).
    [javascript]  view plain 
     copy 
    $"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#3366cc;">".figcaption""font-family:Consolas, Courier, monospace !important;color:#009900;">)."font-family:Consolas, Courier, monospace !important;color:#660066;">each"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#000066;font-weight:bold;">function"font-family:Consolas, Courier, monospace !important;color:#009900;">(i"font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#009900;">{     
        "font-family:Consolas, Courier, monospace !important;color:#000066;font-weight:bold;">var divH "font-family:Consolas, Courier, monospace !important;color:#339933;">= $"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#000066;font-weight:bold;">this"font-family:Consolas, Courier, monospace !important;color:#009900;">)."font-family:Consolas, Courier, monospace !important;color:#660066;">height"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#339933;">;     
        "font-family:Consolas, Courier, monospace !important;color:#000066;font-weight:bold;">var $p "font-family:Consolas, Courier, monospace !important;color:#339933;">= $"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#3366cc;">"p""font-family:Consolas, Courier, monospace !important;color:#339933;">, $"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#000066;font-weight:bold;">this"font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#009900;">)."font-family:Consolas, Courier, monospace !important;color:#660066;">eq"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#cc0000;">0"font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#339933;">;     
        while "font-family:Consolas, Courier, monospace !important;color:#009900;">($p."font-family:Consolas, Courier, monospace !important;color:#660066;">outerHeight"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#009900;">) "font-family:Consolas, Courier, monospace !important;color:#339933;">> divH"font-family:Consolas, Courier, monospace !important;color:#009900;">) "font-family:Consolas, Courier, monospace !important;color:#009900;">{     
            $p."font-family:Consolas, Courier, monospace !important;color:#660066;">text"font-family:Consolas, Courier, monospace !important;color:#009900;">($p."font-family:Consolas, Courier, monospace !important;color:#660066;">text"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#009900;">)."font-family:Consolas, Courier, monospace !important;color:#660066;">replace"font-family:Consolas, Courier, monospace !important;color:#009900;">("font-family:Consolas, Courier, monospace !important;color:#009966;font-style:italic;">/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/"font-family:Consolas, Courier, monospace !important;color:#339933;">, "font-family:Consolas, Courier, monospace !important;color:#3366cc;">"...""font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#339933;">;     
        "font-family:Consolas, Courier, monospace !important;color:#009900;">}"font-family:Consolas, Courier, monospace !important;color:#339933;">;     
    "font-family:Consolas, Courier, monospace !important;color:#009900;">}"font-family:Consolas, Courier, monospace !important;color:#009900;">)"font-family:Consolas, Courier, monospace !important;color:#339933;">;     
    Demo: http://jsfiddle.net/Cople/DrML4/5/
    LeetCode 216組合せ総和III HERODINGのLeetCodeの道
    BZOJ 1012[JSOI 2008]最大数maxnumber問題解&コード