单行，多行文本溢出。。。

最新推荐文章于 2021-04-20 09:04:53 发布

ammi_bai

最新推荐文章于 2021-04-20 09:04:53 发布

阅读量339

点赞数

分类专栏： JavaScript css 前端

本文链接：https://blog.csdn.net/pk142536/article/details/80596826

版权

JavaScript 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端

13 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

单行

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)

ammi_bai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行，多行文本溢出。。。

单行css样式，简单粗暴{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行css控制，有兼容性问题，webkit浏览器可用，一般不这样用{ display: -webkit-box; display: -moz-box; word...
复制链接

扫一扫