单/多行文本溢出显示省略号+清除浮动

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及如下的版本不能使用这种添加伪元素的方法。