国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

翻譯：如何使用CSS實(shí)現(xiàn)多行文本的省略號顯示

lykops / 1486人閱讀

摘要：利用該屬性實(shí)現(xiàn)多行文本的省略號顯示需要配合其他三個(gè)屬性。這段代碼實(shí)現(xiàn)很簡單，就是三個(gè)子元素和包含塊的高度及浮動(dòng)設(shè)置模擬場景我們通過創(chuàng)建一個(gè)子元素來替代將要顯示的省略號，當(dāng)文本溢出的情形下該元素顯示在正確的位置上。

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

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

overflow: hidden直接隱藏多余的文本

text-overflow: ellipsis只適用于單行文本的處理

各種比較脆弱的javascript實(shí)現(xiàn)。之所以說這種實(shí)現(xiàn)比較脆弱是由于需要文本長度的變化時(shí)刻得到回流（relayout）后的布局信息，如寬度

原文寫作時(shí)間是2012.9.18號，比較有意義的一天。不過作者忽略了WebKit提供的一個(gè)擴(kuò)展屬性-webkit-line-clamp，它并不是CSS規(guī)范中的屬性。利用該屬性實(shí)現(xiàn)多行文本的省略號顯示需要配合其他三個(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;則表示超出盒子的部分使用省略號表示。
不過本文將要介紹的方法是采用CSS規(guī)范中的屬性，并結(jié)合特殊的實(shí)現(xiàn)技巧完成的。這意味著在實(shí)現(xiàn)CSS2.1規(guī)范的瀏覽器中都是可以兼容的，不將僅僅是純粹的移動(dòng)端領(lǐng)域，在傳統(tǒng)的PC瀏覽器（你們懂得我指的是哪些瀏覽器）中仍是可行的。好吧，讓我們一起見識下。
CSS實(shí)現(xiàn)多行文本溢出的省略號顯示

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

1st 引子



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


  
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; }
2cd 模擬場景

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


  

   1.prop

   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é)果：

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

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

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

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


  
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.prop
float:right

  
2.main
float:left
Fairly short text

  

  3.realend
position:relative





.prop {
  float: left;
  width: 5px; 
  height: 200px; 
  background: #F0F; }
.main {
    float: right;
    width: 300px; 
    margin-left: -5px;
    background: #AFF; }
.realend {
    float: right; 
        position: relative;
    top: -50px;    
        left: 300px;
    width: 100px; 
        margin-left: -100px;
    padding-right: 5px;
    background: #FAA; font-size: 14px; }

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

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

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

BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

具體可參考我之前的文章負(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元素可以采用偽元素來實(shí)現(xiàn)，減少額外標(biāo)簽的使用。


  
2.main
float:left
Fairly short text
  




/*相當(dāng)于之前的prop元素*/
.ellipsis:before { 
    content: "";
    float: left;
    width: 5px; height: 200px; 
    background: #F0F; }
/*相當(dāng)于之前的main元素*/
.ellipsis > *:first-child {
    float: right;
    width: 100%; 
    margin-left: -5px;
    background: #AFF; }
/*相當(dāng)于之前的realend元素*/
.ellipsis:after {
    content: "realend";
    float: right; position: relative;
    top: -25px;    left: 100%;
    width: 100px; margin-left: -100px;
    padding-right: 5px;
    background: #FAA; font-size: 14px; }

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

6th 隱藏

之前的實(shí)現(xiàn)中在文本未溢出的情況下，realend元素會(huì)出現(xiàn)在父元素的右側(cè)，正如。解決此問題很簡單，急需要設(shè)置：

.ellipsis{
  overflow:hidden;
}

即可解決問題。

7th 大功告成

現(xiàn)在我們離結(jié)完就差一步了，即去掉各元素的背景色，并且用“...”替換文本。最后為了優(yōu)化體驗(yàn)，采用漸變來隱藏“...”覆蓋的文本，并設(shè)置了一些兼容性的屬性。
到了此處，相信現(xiàn)在關(guān)心的只是CSS的代碼了：

.ellipsis {
  overflow: hidden;
  height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "