日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

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

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

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

合理的截?cái)喽嘈形谋臼羌蝗菀椎氖虑?，我們通常采用幾種方法解決：

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

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

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

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

我們把實(shí)現(xiàn)的細(xì)節(jié)劃分為7個(gè)步驟，在這個(gè)實(shí)現(xiàn)過(guò)程中最簡(jiǎn)單的就是截?cái)辔谋?，而最難的部分則是讓一個(gè)元素處在其父包含塊溢出時(shí)的右下方，并且當(dāng)父元素未溢出時(shí)該元素消失不可見(jiàn)。為了去難避易，我們先從比較簡(jiǎn)單的地方開(kāi)始–當(dāng)父包含框比較小時(shí)，將子元素布局到父包含框的右下角。

1st 引子 

  

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

 
 
 
 
    
  
  
  
  
  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 模擬場(chǎng)景

    我們通過(guò)創(chuàng)建一個(gè)子元素來(lái)替代將要顯示的省略號(hào)，當(dāng)文本溢出的情形下該元素顯示在正確的位置上。在接下來(lái)的實(shí)現(xiàn)中，我們創(chuàng)建了一個(gè)realend元素，并利用上一節(jié)end元素浮動(dòng)后的位置來(lái)實(shí)現(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; }  

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

    若父元素并沒(méi)有溢出，那么realend元素會(huì)出現(xiàn)在其右側(cè) 

    這種情況解決很簡(jiǎn)單，請(qǐng)看下文之第七節(jié)，此處僅作實(shí)例說(shuō)明。

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

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

     
 
 
 
      
  
  
  
  
    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元素

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

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

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

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

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

    具體可參考我之前的文章負(fù)margin的原理以及應(yīng)用一文。

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

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

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

    同時(shí)，prop元素和realend元素可以采用偽元素來(lái)實(shí)現(xiàn)，減少額外標(biāo)簽的使用。

     
 
 
 
      
  
  
  
  
    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. /*相當(dāng)于之前的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. /*相當(dāng)于之前的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. /*相當(dāng)于之前的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 隱藏

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

    解決此問(wèn)題很簡(jiǎn)單，急需要設(shè)置：

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

    即可解決問(wèn)題。

    7th 大功告成

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

    到了此處，相信現(xiàn)在關(guā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.

     總結(jié)之兼容性

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


    網(wǎng)頁(yè)題目：如何用CSS實(shí)現(xiàn)多行文本的省略號(hào)顯示
    本文地址：http://www.5511xx.com/article/djegcoc.html

    其他資訊