單/多行文本溢出顯示省略號+清除浮動

1.文本溢出顯示省略號

(1)單行文本溢出，只須要給文本所在的容器設置以下樣式：

width:100px;/*容器必定要設置固定寬度*/    
white-space:nowrap;/*強制一行內顯示*/    
overflow:hidden;/*溢出隱藏*/    
text-overflow:ellipsis; /*顯示省略號*/    

注意：即便給上面文本所在的容器設置了足夠高的高度，也會強制變成單行內顯示。

(2)多行文本溢出，經過本人親自試驗，總結了如下幾種方法：

①只適用於Webkit內核的瀏覽器，給文本所在容器設置以下樣式：

width:100ox;/*容器必定要設置固定寬度*/
display:-webkit-box;
-webkit-line-clamp:2;/*強制兩行顯示*/
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;

注意：若是給上面文本所在的容器設置了足夠高的高度，會出如今省略號後面追加剩下文本的矛盾畫面。

②引入clamp.js插件，調用的js代碼以下：

$clamp($(".container")[0],{clamp:2});//注意要將jquery下的對象改爲對應的原生對象

注意：若是給上面文本所在的容器設置了足夠高的高度，也會出如今省略號後面追加剩下文本的矛盾畫面。

若是想詳細瞭解clamp.js插件的使用方法，請移步https://github.com/josephschmitt/Clamp.js/tree/master

③引入jquery.dotdotdot.js插件（先要引入jquery.js文件），如下是實如今省略號後面點擊按鈕展開所有內容再次點擊收回的效果，先定義css樣式（容器要設置固定寬度和高度）：

a{text-decoration:none;}
.opened{height:auto;}  
.toggle .close,.opened .toggle .open{display:none;}  
.toggle .opened,.opened .toggle .close{display:inline;}        

js部分的代碼以下：

var $dot = $('.container');  
function createDots(){  
    $dot.dotdotdot({  
        after: 'a.toggle'  
    });  
}  
function destroyDots() {  
    $dot.trigger('destroy');  
}  
createDots();  
$dot.on('click','a.toggle',function() {  
    $dot.toggleClass( 'opened' );  
    if ($dot.hasClass('opened')){  
        destroyDots();  
    } else {  
        createDots();  
    }  
    return false;  
});      

注意：必須給上面文本所在的容器設置必定的高度而且要小於正常能夠容納所有文本內容的高度，不然不會出現省略號。

2.清除浮動

(1)目標元素之間如果兄弟關係，給下面的元素加clear: both;

(2)目標元素之間如果父子關係，有如下幾種實現方法：

①給父元素設置固定的高度。

②給父元素添加overflow:hidden;或者添加絕對定位屬性。

③在浮動元素下方設置一個空標籤，即

<div style="idth: 100%;height: 0;clear: both;overflow: hidden;"></div>

④給父元素添加僞元素，即

::after{ display: block;content: '';clear: both; }

注意：ie8及如下的版本不能使用這種添加僞元素的方法。