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

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

巴特西

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

最新文章

热门文章