单行
css样式,简单粗暴
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行
css控制,有兼容性问题,webkit浏览器可用,一般不这样用
{
display: -webkit-box;
display: -moz-box;
word-wrap: break-word;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;
text-overflow: ellipsis;
}
- js控制
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.box{
width: 300px;
background-color: pink;
line-height:20px;
//这部分可以css控制多行...
/*display: -webkit-box;
display: -moz-box;
word-wrap: break-word;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;*/
/*overflow: hidden; */
/*text-overflow: ellipsis; */
//加上这个是单行...
/*white-space: nowrap;*/
}
</style>
<body>
<div class="box" id="box">
字典是一种以键-值对形式存储数据的数据结构,如同手机通讯录中,想要寻找一个电话时,只要找到名字就可以找到其电话号码。
JavaScript的Object类就是以字典的形式设计的。这里将使用Object类的特性,实现一个Dictionary类,让字典类型的对象使用起来更加简单
</div>
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById("box");
var str = text.innerHTML;
window.onresize = function(){
doEllipsis("box",3,str);
}
doEllipsis("box",3,str);
}
function doEllipsis1(id, rows, str){
var text = document.getElementById(id);
if(window.getComputedStyle){
var lineHeight = getComputedStyle(text,nubox)["line-height"];
console.log(1);
}else{
var lineHeight = text.currentStyle["line-height"];
console.log(2);
}
var at = rows*parseInt(lineHeight);
var tempstr = str;
text.innerHTML = tempstr;
var len = tempstr.length;
var i = 0;
if(text.offsetHeight <= at){ //如果所有文本在写入html后文本没有溢出,那不需要做溢出处理
/*text.innerHTML = tempstr;*/
}
else { //否则 二分处理需要截断的文本
var low = 0;
var high = len;
var middle;
console.log(text.offsetHeight)
while(text.offsetHeight > at){
middle = (low+high)/2;
text.innerHTML = tempstr.substring(0,middle); //写入二分之一的文本内容看是否需要做溢出处理
if(text.offsetHeight < at){ //不需要 则写入全部内容看是否需要 修改low的值
text.innerHTML = tempstr.substring(0,high);
low = middle;
}
else{ //写入二分之一的文本内容依旧需要做溢出处理 再对这二分之一的内容的二分之一的部分做判断
high = middle-1; //修改high值
}
}
tempstr = tempstr.substring(0, high-3)+"...";
text.innerHTML = tempstr;
text.height = at +"px";
}
}
function doEllipsis(id, rows, str){
var text = document.getElementById(id);
if(window.getComputedStyle){
var lineHeight = getComputedStyle(text,null)["line-height"];
console.log(1);
}else{
var lineHeight = text.currentStyle["line-height"];
console.log(2);
}
var at = rows*parseInt(lineHeight); //计算包含文本的div应该有的高度
var tempstr = str; //获取到所有文本
text.innerHTML = tempstr; //将所有文本写入html中
var len = tempstr.length;
var i = 0;
if(text.offsetHeight <= at){ //如果所有文本在写入html后文本没有溢出,那不需要做溢出处理
/*text.innerHTML = tempstr;*/
}
else { //否则 一个一个字符添加写入 不断判断写入后是否溢出
var temp = "";
text.innerHTML = temp;
while(text.offsetHeight <= at){
temp = tempstr.substring(0, i+1);
i++;
text.innerHTML = temp;
}
var slen = temp.length;
tempstr = temp.substring(0, slen-1);
len = tempstr.length
text.innerHTML = tempstr.substring(0, len-3) +"..."; //替换string后面三个字符
text.height = at +"px"; //修改文本高度 为了让CSS样式overflow:hidden生效
}
}
</script>
</body>
</html>
还有最简单的数字数,截取n个,就不详细写出来了
参考文章(https://www.cnblogs.com/li-lanie/p/5960625.html)