超出文本内容用...表示

桃扇骨 2022-06-07 13:50 231阅读 0赞

首先，要知道css的三条属性。  
overflow:hidden; //超出的文本隐藏  
text-overflow:ellipsis; //溢出用省略号显示  
white-space:nowrap; //溢出不换行  
这三个是css的基础属性，需要记得。  
但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？  
  
css3解决了这个问题，解决方法如下：  
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。  
\-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）  
\-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。  
最后的css样式如下：  
overflow:hidden;   
text-overflow:ellipsis;  
display:-webkit-box;   
\-webkit-box-orient:vertical;  
\-webkit-line-clamp:2;

1.常规css方法——可以实现IE，Safari，chrome，opera浏览器下文字溢出省略号表示

.zxx\_text\_overflow\_1\{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;\}

2.使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示

.zxx\_text\_overflow\_2\{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('../xml/ellipsis.xml\#ellipsis'); overflow:hidden;\}

这里有个小结论：这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下，或是下一级目录下（我已测试），要是向上跨文件夹访问或绝对路径访问则失效。原因不详！  
3.使用:after伪类和content实现文字溢出后省略号表示（严重不推荐！直接跳过）  
愤慨：我实在忍不住了，我要臭骂一通。我很久之前就自己试过content实现后面的省略号表示，发现问题很多，遂想了其他方法。  
今天我本想找以前一位兄弟使用图片实现类似效果的方法，发现网上突然出现了标题“为兼容IE,FF文字溢出省略号显示的文章”，其实就一篇，很多我很鄙视的教程网站都有（正好打上了热门关键字啊）。  
我原本试试介绍这个方法的，但是我实在做不下去了！这个方法根本不行，一点都不行！要是N年前，只有IE6和Firefox浏览器的时候，这个方法或许可以试试。现在根本不行，在现在看来，写文章的人就是个大草包，要么是个史前时代过来的程序员，文章里面错误一大堆，用胡说八道形容一点都不为过，很多东西根本没有经过验证就那儿大放厥词。1、说是兼容，其实反而大大破坏了兼容性，IE6和IE7下的表现就不一样，一句IE“不支持max-width”就让我想给作者扇个耳光，IE7不支持吗，别告诉我你写这文章时还没有IE7浏览器。2、本来chrome浏览器，Safari还有opera可以实现文字溢出省略号显示的，现在受限与:after和content，就会一处理不当，文字直接被截，就很丑了。3、多套用了一层标签，css也多了好几行，没有必要，资源消耗高。4、当文字很短时后面也还跟着个省略号，没有溢出为什么还要显示省略号呢？  
总之，结论就是这个方法一点点实用价值都没有。所以严重不推荐！  
4.我自己想出来的方法：margin负值定位法——兼容所有主流浏览器  
这是一个比较短的文字。…  
这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。…  
HTML部分：  
<div class="zxx\_text\_overflow\_4">  
    <div class="text\_con">这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>  
    <div class="text\_dotted">…</div>  
</div>  
CSS部分：  
.zxx\_text\_overflow\_4\{width:24em; height:1.3em; overflow:hidden; zoom:1;\}  
.zxx\_text\_overflow\_4 .text\_con\{float:left; height:1.3em; margin-right:3em; overflow:hidden;\}  
.zxx\_text\_overflow\_4 .text\_dotted\{width:3em; height:1.31em; float:right; margin-top:-1.3em;\}  
简要说明：此方法兼容IE6，IE7（IE8未测过），Firefox，chrome，Safari，opera浏览器。没有hack，没有生僻的css样式。文字短时，没有省略号，文字溢出时就出现省略号。可以说是相当不错的一个方法。原理也很简单：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。  
5.jQuery限制字符字数的方法  
我的文字个数较少，不要杀我！  
你个杀千刀的，怎么写了这么多的文字，我要被拦腰...  
HTML部分：  
<div class="zxx\_text\_overflow\_5">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，天啊！</div>  
没有css啦，只有js代码：  
$(document).ready(function()\{  
    //限制字符个数  
    $(".zxx\_text\_overflow\_5").each(function()\{  
        var maxwidth=23;  
        if($(this).text().length>maxwidth)\{  
            $(this).text($(this).text().substring(0,maxwidth));  
            $(this).html($(this).html()+'...');  
        \}  
    \});  
\});  
6.jQuery自动判断宽度是否超出的方法  
我的文字个数较少，不要杀我！  
你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了...  
HTML部分：  
<div class="zxx\_text\_overflow\_6">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</div>  
css部分：  
.zxx\_text\_overflow\_6\{width:400px;\}  
js部分：  
var wordLimit=function()\{  
    $(".zxx\_text\_overflow\_6").each(function()\{  
        var copyThis = $(this.cloneNode(true)).hide().css(\{  
            'position': 'absolute',  
            'width': 'auto',  
            'overflow': 'visible'  
        \});  
        $(this).after(copyThis);  
        if(copyThis.width()>$(this).width())\{  
            $(this).text($(this).text().substring(0,$(this).html().length-4));  
            $(this).html($(this).html()+'...');  
            copyThis.remove();  
            wordLimit();  
        \}else\{  
            copyThis.remove(); //清除复制  
            return;  
        \}  
    \});  
\}

wordLimit();