手机版 | 登陆 | 注册 | 投稿 | 反馈留言 | 设首页 | 加收藏
网站首页 > 前端开发 > Div+CSS > div+css技术文章 >text-overflow:ellipsis;单行,多行文本溢出显示...

text-overflow:ellipsis;单行,多行文本溢出显示...

时间:2020-03-24    点击: 次    发布者:佚名 - 小 + 大

常见的单行文本溢出显示省略号 写法:text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .p{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    <body>
        <p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
    </body>
</html>

text-overflow: ellipsis;多行文本溢出就无法满足,so,
WebKit浏览器有一个-webkit-line-clamp的属性,用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .p {
            height: 60px;
            line-height: 30px;
            width: 80px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
    <body>
        <p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
    </body>
</html>



如下:


其它浏览器的话就需要通过js实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        div{
            height: 60px;
        }
        p {
            line-height: 30px;
            width: 80px;
            margin: 0 auto;
        }
    </style>
    <body>
        <div id="div">
            <p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
        </div>
    </body>
    <script type="text/javascript">
            var eleH = document.getElementById("div").clientHeight;

            var pEle = document.getElementById("p");

            while(pEle.clientHeight > eleH) {

                pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");

            };
    </script>
</html>


版权声明:本文为CSDN博主「前端小狮」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文https://blog.csdn.net/m0_37885651/article/details/79896850

上一篇:word-break:break-all和word-wrap:break-word的区别

下一篇:文字居中、加粗、红色的css写法



Copyright © 2020 天人系列管理系统 版权所有,授权www.rjc.wang使用  Powered by 55TR.COM 运行代码测试页
锐教程网站www.rjc.wang由天天科技荣誉出品