日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何用CSS實現(xiàn)多行文本的省略號顯示

本文翻譯自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些許改動，并添加譯者的一些感想，請各位讀者諒解。

我們提供的服務有：網(wǎng)站設計、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、織金ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的織金網(wǎng)站制作公司

合理的截斷多行文本是件不容易的事情，我們通常采用幾種方法解決：

  • overflow: hidden直接隱藏多余的文本
  • text-overflow: ellipsis只適用于單行文本的處理
  • 各種比較脆弱的javascript實現(xiàn)。之所以說這種實現(xiàn)比較脆弱是由于需要文本長度的變化時刻得到回流(relayout)后的布局信息，如寬度

英文原文寫作時間是2012.9.18號，比較有意義的一天。不過作者忽略了WebKit提供的一個擴展屬性-webkit-line-clamp，它并不是CSS規(guī)范中的屬性。利用該屬性實現(xiàn)多行文本的省略號顯示需要配合其他三個屬性：display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis;。其中，-webkit-line-clamp設置塊元素包含的文本行數(shù);display: -webkit-box設置塊元素的布局為伸縮布局;-webkit-box-orient設置伸縮項的布局方向;text-overflow: ellipsis;則表示超出盒子的部分使用省略號表示。

不過本文將要介紹的方法是采用CSS規(guī)范中的屬性，并結合特殊的實現(xiàn)技巧完成的。這意味著在實現(xiàn)CSS2.1規(guī)范的瀏覽器中都是可以兼容的，不將僅僅是純粹的移動端領域，在傳統(tǒng)的PC瀏覽器(你們懂得我指的是哪些瀏覽器)中仍是可行的。好吧，讓我們一起見識下。

CSS實現(xiàn)多行文本溢出的省略號顯示

我們把實現(xiàn)的細節(jié)劃分為7個步驟，在這個實現(xiàn)過程中最簡單的就是截斷文本，而最難的部分則是讓一個元素處在其父包含塊溢出時的右下方，并且當父元素未溢出時該元素消失不可見。為了去難避易，我們先從比較簡單的地方開始–當父包含框比較小時，將子元素布局到父包含框的右下角。

1st 引子 

  

其實這個實現(xiàn)完全利用了元素浮動的基本規(guī)則。在這里不詳細講解CSS2.1規(guī)范中的幾種情形，不明白的讀者自行查閱。這段代碼實現(xiàn)很簡單，就是三個子元素和包含塊的高度及浮動設置：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   1.prop
    float:left
 
  •  
  •   2.main
    float:right
    Fairly short text
    •  
  •  
  •   3.end
    float:right
    •  
  •  
  •  
  •  
  •   
  •  
  • .wrap { 
  •  
  •   width: 400px; height: 200px; 
  •  
  •     margin: 20px 20px 50px; 
  •  
  •     border: 5px solid #AAA; 
  •  
  •     line-height: 25px; 
  •  
  • } 
  •  
  •   
  •  
  • .prop { 
  •  
  •     float: left; 
  •  
  •     width: 100px; height: 200px; 
  •  
  •     background: #FAF; } 
  •  
  • .main { 
  •  
  •     float: right; 
  •  
  •     width: 300px; 
  •  
  •     background: #AFF; } 
  •  
  • .end { 
  •  
  •     float: right; 
  •  
  •     width: 100px; 
  •  
  •     background: #FFA; }  

    • 2nd 模擬場景

    我們通過創(chuàng)建一個子元素來替代將要顯示的省略號，當文本溢出的情形下該元素顯示在正確的位置上。在接下來的實現(xiàn)中，我們創(chuàng)建了一個realend元素，并利用上一節(jié)end元素浮動后的位置來實現(xiàn)realend元素的定位。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.    
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.    1.prop
       
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.    float:right
     
  •  
  •    
  •  
  •    2.main
     
  •  
  •    float:left
     
  •  
  •    Fairly short text
    •  
  •  
  •    
  •  
  •     
  •  
  •      4.realend
     
  •  
  •      position:absolute
    •  
  •  
  •   3.end
    float:right 
  •  
  •   
    •  
  •  
  •  
  •  
  •   
  •  
  • .end { 
  •  
  •     float: right; position: relative; 
  •  
  •     width: 100px; 
  •  
  •     background: #FFA; } 
  •  
  • .realend { 
  •  
  •     position: absolute; 
  •  
  •     width: 100%; 
  •  
  •     top: -50px; 
  •  
  •     left: 300px; 
  •  
  •     background: #FAA; font-size: 13px; }  

    • 這一步中，我們主要關心的是realend元素的定位，基于浮動后的end元素設置偏移量，當end元素浮動到***節(jié)第二章圖的位置時(即在prop元素的下方)，此時realend元素正好處在end元素的上方50px，右側300px-100px=200px處，而該位置正是父包含框wrap元素的右下角，此時正是我們期待的結果： 

    若父元素并沒有溢出，那么realend元素會出現(xiàn)在其右側 

    這種情況解決很簡單，請看下文之第七節(jié)，此處僅作實例說明。

    3rd 優(yōu)化定位模型

    在第二節(jié)中，我們針對end元素設置了相對定位，對realend元素設置絕對定位。但是我們可以采用更為簡單的代碼來實現(xiàn)，即只使用相對定位。熟悉定位模型的同學應該知道，相對定位的元素仍然占據(jù)文本流，同時仍可針對元素設置偏移。這樣，就可以去掉end元素，僅針對realend元素設置相對定位。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   1.prop
      float:right
     
  •  
  •   2.main
    float:left
    Fairly short text
    •  
  •  
  •    
  •  
  •   3.realend
    position:relative
    •  
  •  
  •  
  •  
  •   
  •  
  • .realend { 
  •  
  •     float: right; 
  •  
  •         position: relative; 
  •  
  •     width: 100px; 
  •  
  •     top: -50px; left: 300px; 
  •  
  •     background: #FAA; font-size: 14px; }  

    • 其他的屬性并不改變，效果一樣。

    4th 削窄prop元素

    目前，最左側的prop元素的作用在于讓realend元素在文本溢出時處在其正下方，在前幾節(jié)的示例代碼中為了直觀的演示，設置prop元素的寬度為100px，那么現(xiàn)在為了更好的模擬實際的效果，我們縮小逐漸縮小prop元素的寬度。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   1.prop
      float:right 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   2.main
      float:left
      Fairly short text 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.    
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.   3.realend
      position:relative 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17. .prop { 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.   float: left; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.   width: 5px; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.   height: 200px; 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.   background: #F0F; } 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27. .main { 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29.     float: right; 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31.     width: 300px; 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33.     margin-left: -5px; 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35.     background: #AFF; } 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37. .realend { 
      38. 
  
  
  
  
    38.  
      39. 
  
  
  
  
    39.     float: right; 
      40. 
  
  
  
  
    40.  
      41. 
  
  
  
  
    41.         position: relative; 
      42. 
  
  
  
  
    42.  
      43. 
  
  
  
  
    43.     top: -50px; 
      44. 
  
  
  
  
    44.  
      45. 
  
  
  
  
    45.         left: 300px; 
      46. 
  
  
  
  
    46.  
      47. 
  
  
  
  
    47.     width: 100px; 
      48. 
  
  
  
  
    48.  
      49. 
  
  
  
  
    49.         margin-left: -100px; 
      50. 
  
  
  
  
    50.  
      51. 
  
  
  
  
    51.     padding-right: 5px; 
      52. 
  
  
  
  
    52.  
      53. 
  
  
  
  
    53.     background: #FAA; font-size: 14px; }  
      54.

    針對prop元素，縮小寬度為5px，其余屬性不變;

    針對main元素，設置margin-left:5px，讓main元素左移5px，這樣main元素在寬度上就完全占滿了父元素;

    對于realend元素，top、left和width的值不變。而設置margin-left: -100px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。

     
 
 
 
      
  
  
  
  
    1. BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth; 
      2.

    具體可參考我之前的文章負margin的原理以及應用一文。

    由于CSS規(guī)范規(guī)定padding的值不可以為負數(shù)，因此只有設置margind-left為負值，且等于其寬度。這樣做的最終目的就是保證realend元素處在prop元素的下方，保證在文本溢出的情況下定位準確性: 

    5th 繼續(xù)優(yōu)化：流式布局+偽元素

    目前，realend元素的相關屬性仍采用px度量，為了更好的擴展性，可以改用%替代。

    同時，prop元素和realend元素可以采用偽元素來實現(xiàn)，減少額外標簽的使用。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      2.main
      float:left
      Fairly short text 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.    
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.   
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. /*相當于之前的prop元素*/ 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. .ellipsis:before { 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.     content: ""; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.     float: left; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     width: 5px; height: 200px; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.     background: #F0F; } 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23. /*相當于之前的main元素*/ 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25. .ellipsis > *:first-child { 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.     float: right; 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29.     width: 100%; 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31.     margin-left: -5px; 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33.     background: #AFF; } 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35. /*相當于之前的realend元素*/ 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37. .ellipsis:after { 
      38. 
  
  
  
  
    38.  
      39. 
  
  
  
  
    39.     content: "realend"; 
      40. 
  
  
  
  
    40.  
      41. 
  
  
  
  
    41.     float: right; position: relative; 
      42. 
  
  
  
  
    42.  
      43. 
  
  
  
  
    43.     top: -25px; left: 100%; 
      44. 
  
  
  
  
    44.  
      45. 
  
  
  
  
    45.     width: 100px; margin-left: -100px; 
      46. 
  
  
  
  
    46.  
      47. 
  
  
  
  
    47.     padding-right: 5px; 
      48. 
  
  
  
  
    48.  
      49. 
  
  
  
  
    49.     background: #FAA; font-size: 14px; }  
      50.

    效果圖和上節(jié)一樣。

    6th 隱藏

    之前的實現(xiàn)中在文本未溢出的情況下，realend元素會出現(xiàn)在父元素的右側，正如。 

    解決此問題很簡單，急需要設置：

     
 
 
 
      
  
  
  
  
    1. .ellipsis{ 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     overflow:hidden; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. }  
      6.

    即可解決問題。

    7th 大功告成

    現(xiàn)在我們離完結就差一步了，即去掉各元素的背景色，并且用“…”替換文本。***為了優(yōu)化體驗，采用漸變來隱藏“…”覆蓋的文本，并設置了一些兼容性的屬性。

    到了此處，相信現(xiàn)在關心的只是CSS的代碼了：

     
 
 
 
      
  
  
  
  
    1. .ellipsis { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   overflow: hidden; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   height: 200px; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     line-height: 25px; 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.     margin: 20px; 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.     border: 5px solid #AAA; } 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. .ellipsis:before { 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.     content:""; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     float: left; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.     width: 5px; height: 200px; } 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.   
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25. .ellipsis > *:first-child { 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.     float: right; 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29.     width: 100%; 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31.     margin-left: -5px; }         
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33.   
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35. .ellipsis:after { 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37.     content: "\02026";   
      38. 
  
  
  
  
    38.  
      39. 
  
  
  
  
    39.   
      40. 
  
  
  
  
    40.  
      41. 
  
  
  
  
    41.     box-sizing: content-box; 
      42. 
  
  
  
  
    42.  
      43. 
  
  
  
  
    43.     -webkit-box-sizing: content-box; 
      44. 
  
  
  
  
    44.  
      45. 
  
  
  
  
    45.     -moz-box-sizing: content-box; 
      46. 
  
  
  
  
    46.  
      47. 
  
  
  
  
    47.   
      48. 
  
  
  
  
    48.  
      49. 
  
  
  
  
    49.     float: right; position: relative; 
      50. 
  
  
  
  
    50.  
      51. 
  
  
  
  
    51.     top: -25px; left: 100%; 
      52. 
  
  
  
  
    52.  
      53. 
  
  
  
  
    53.     width: 3em; margin-left: -3em; 
      54. 
  
  
  
  
    54.  
      55. 
  
  
  
  
    55.     padding-right: 5px; 
      56. 
  
  
  
  
    56.  
      57. 
  
  
  
  
    57.      
      58. 
  
  
  
  
    58.  
      59. 
  
  
  
  
    59.     text-align: right; 
      60. 
  
  
  
  
    60.  
      61. 
  
  
  
  
    61.   
      62. 
  
  
  
  
    62.  
      63. 
  
  
  
  
    63.    
      64. 
  
  
  
  
    64.  
      65. 
  
  
  
  
    65.         background-size: 100% 100%; 
      66. 
  
  
  
  
    66.  
      67. 
  
  
  
  
    67.   /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/ 
      68. 
  
  
  
  
    68.  
      69. 
  
  
  
  
    69. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC); 
      70. 
  
  
  
  
    70.  
      71. 
  
  
  
  
    71.    
      72. 
  
  
  
  
    72.  
      73. 
  
  
  
  
    73.     background: -webkit-gradient(linear, left top, right top, 
      74. 
  
  
  
  
    74.  
      75. 
  
  
  
  
    75.         from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); 
      76. 
  
  
  
  
    76.  
      77. 
  
  
  
  
    77.     background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
      78. 
  
  
  
  
    78.  
      79. 
  
  
  
  
    79.     background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
      80. 
  
  
  
  
    80.  
      81. 
  
  
  
  
    81.     background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
      82. 
  
  
  
  
    82.  
      83. 
  
  
  
  
    83.     background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
      84. 
  
  
  
  
    84.  
      85. 
  
  
  
  
    85. } 
      86.

     總結之兼容性

    從上文的實現(xiàn)細節(jié)來看，我們利用的技巧完全是CSS規(guī)范中的浮動+定位+盒模型寬度計算，唯一存在兼容性問題的在于無關痛癢的漸變實現(xiàn)，因此可以在大多數(shù)瀏覽器下進行嘗試。 


    網(wǎng)站名稱：如何用CSS實現(xiàn)多行文本的省略號顯示
    網(wǎng)頁地址：http://www.dlmjj.cn/article/djegcoc.html

    其他資訊