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

Posted 2020-08-16 衣冠小禽兽

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=’width:100%;height:0;clear:both;overflow:hidden’></div>

④给父元素添加伪元素，即

::after{display:block;content:".";clear:both}

⑤若是ie6还得给父元素添加zoom:1