css强制换行显示省略号之显示两行后显示省略号

时间：2024-02-24 10:06:01

1，首先来一个固定宽度，在一行显示，超出隐藏，显示省略号的样式

display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

2，其实来一个可以设置让它显示多少行后再显示省略号，这只能用私有属性解决了

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*重点，不能用block等其他*/
-webkit-line-clamp: 2;/*重点IE和火狐不支持*/
-webkit-box-orient: vertical;/*重点*/

 因为 -webkit-line-clamp: 2  是webkit的私有属性，其他浏览器不可以用。所以在网上找了一下，有个插件还是很好用的，完美的实现了这个属性。

还可以配置很多属性，比如 是否动画展开，不一定要显示省略号，可以显示其他符号，是否启用 -webkit-line-clamp:  这个属性等等；

下载地址 https://github.com/josephschmitt/Clamp.js

首先引入

<script src="../clamp.js"></script>

 

//调用方法：$clamp(dom,options); dom是节点，options是配置项

用这个插件需要注意一下事项：

我在用这个插件的时候，IE和火狐下面形态各异，火狐在第二行还没到第二行的末尾处（甚至还有很宽的距离）就显示省略号了。IE有时候也出现。

查看了一下源码发现 这个和指定不指定line-height有关系，因为源码中会获取line-height获取高度 来判断显示省略号的；

 function getLineHeight(elem) {//计算高度
        var lh = computeStyle(elem, \'line-height\');
        if (lh == \'normal\') {//如果DOM 节点没有指定line-height 那么IE会输出默认的normal  火狐会输出22px
               
                lh = parseInt(computeStyle(elem, \'font-size\')) * 1.2;
        }
        return parseInt(lh);
 }

如果没有指定行高，IE下面computeStyle(elem, \'line-height\');就会返回 nomal。火狐下面就会根据浏览器返回[22px]

再接着看源码

if (supportsNativeClamp && opt.useNativeClamp) {//如果支持webkit-line-clamp 直接用
            sty.overflow = \'hidden\';
            sty.textOverflow = \'ellipsis\';
            sty.webkitBoxOrient = \'vertical\';
            sty.display = \'-webkit-box\';
            //sty.wordWrap = \'break-word\';
            sty.webkitLineClamp = clampValue;

            if (isCSSValue) {
                sty.height = opt.clamp + \'px\';
            }
        }
        else {
            var height = getMaxHeight(clampValue);
            if (height <= element.clientHeight) {
                clampedText = truncate(getLastChild(element), height);
            }
        }

如果用户在样式中指定了line-height,IE和火狐下面 就会 height == element.clientHeight（一直等于），则就一直会走

clampedText = truncate(getLastChild(element), height); 这段代码。所以需要把 height <= element.clientHeight  的= 号去掉。（具体没去研究，看源码truncate函数即可，下次补上）

没有指定的话 IE就会根据 font-size*12 = 16*1.2 = 19.2

火狐则是一直是22px ，这就有很大差异了。导致

<script>
var header = document.getElementsByTagName(\'h1\')[0],
$clamp(header, {clamp: 2});

//还可以配置如下 选项 。options包括：clamp——行数，useNativeClamp——是否使用-webkit-line-clamp属性，trucationChar——省略的符号（不限于省略号），truncationHTML——省略的内容（不限于符号），animate——是否实现动画折叠。
</script>

 还有一个插件 也不叫好用，不过这个插件好像只能设置固定的宽高，超出宽高才会隐藏，不过也多了一些配置（比如，+号折叠，展开。控制多少个字符显示灯）

  jQuery.dotdotdot

相关文章