文字超出父级高度，需要使超出的文字用省略号代替。
例如现在有如下元素：
<div id="box">歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国</div>
要实现超出的文字用省略号代替：
可以通过一下几种方法实现：
一、使用-webkit-line-clamp
{
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
其中-webkit-line-clamp的作用是限定文字行数，即文字超出4行后，在文字的最后添加省略号。而且display: -webkit-box;不能用 display: flex; 代替，否则无效（这也算是display:box;和 display: flex;的一个区别吧）。box-orient: vertical; 的意思是从上向下垂直排列字符，不能用word-wrap:break-word;代替。
优点：纯css代码，编写相对简单，不需要复杂计算，强烈推荐在Mobile端页面。
缺点：line-clamp是-webkit-的私有属性，W3C里并没有收录，所以在pc端兼容性非常低，并且需要自己计算行数。
二、伪类＋content
div{
width:100px;
border:2px solid #0cf;
max-height: 70px;
line-height: 18px;
position:relative;
}
div:after {
content: '...';
position: absolute;
right: 0;
bottom: 0;
width: 35%;
height: 1.2em;
background:white;
}
优点：IE8及以上，chrome，safari和firefox都可以使用，兼容性相对较好。
缺点：伪类的尺寸及位置需要自己调整，css代码较多
三、js添加省略号
代码（1）substr：
var el = document.getElementById('box');
var divContent = el.innerHTML;
var divContentLength = divContent.length;
if (divContentLength > 24) {
el.innerHTML = divContent.substr(0,23) + " ...";
}
截取23个文字，第24个文字用省略号代替。
优点：不存在浏览器兼容性的问题，代码简单，推荐字数不多的情况下使用。
缺点：需要自己计算限定的文字长度。
代码（2）pop：
var el = document.getElementById('box');
var divContent = el.innerHTML;
var divContentLength = divContent.length;
var divContentWords = divContent.split('');
var divScrollHeight, divOffsetHeight;
for(var i=0; i<divContentLength; i++){
divScrollHeight = el.scrollHeight;
divOffsetHeight = el.offsetHeight;
if(divScrollHeight > divOffsetHeight){
divContentWords.pop();
el.innerHTML = divContentWords.join('') + '...';
}
}
优点：不需要自己计算限定文字的长度，不存在浏览器兼容性问题。
缺点：如果内容是英文，则需要改成split('空格')，以及join('空格')，适应性不好。
四、jquery.dotdotdot.js插件
（1）引入插件：
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dotdotdot.js" type="text/javascript"></script>
</head>
（2）使用方法：
$(document).ready(function() {
$("#box").dotdotdot();
});
（3）属性：
$("#box").dotdotdot({
ellipsis : '... ',
});
改变结尾符号，如果换成ellipsis : '~~~ ',效果为：
$("#box").dotdotdot({
wrap : 'word',
});
共有3中属性可以选择：'word'/'letter'/'children'，如果文字中含有空格，例如
<div id="box">歌唱祖国 歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国</div>
属性选择word的话，dotdotdot会在空格处分割文字并添加省略号：
这时属性选择letter，就可以避免这种情况，效果为：
如果选择‘children’，则文字的长度必须控制在最外层元素的高度内，若超出会导致文字消失,例如：
<div id="box">
<span>歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国</span>
<span>歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国歌唱祖国</span>
</div>
一个span元素的高为72px，两个则为144px，若外层div的高为144px，则两个span都可以正常显示，若div高度小于144px，例如改为140px时，则第二个span不会显示。
$("#box").dotdotdot({
wrap : 'letter',
after: '<span class="box1">more</span>'
});
在省略号的最后添加元素，不能直接添加文字，效果为：
$("#box").dotdotdot({
wrap : 'letter',
height: 40
});
height用设置文字显示的最大限度，默认单位是px，除了添加数字，也可以添加函数。
$("#box").dotdotdot({
wrap: 'letter',
callback: function(){
alert(1);
}
});
callback回调函数。
参考：
1.http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css
2.http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
3.https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
4.http://dotdotdot.frebsite.nl/
网友评论