[置顶] 文本溢出省略号

时间：2022-01-29 10:29:28

最近开发过程中，经常遇到 文本溢出 的显示问题。现归纳一下几种方法。
早在2012年，所有浏览器都已经支持text-overflow:ellipsis;

一、单行文本溢出

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .text_overflow_1{
                width:27em;
                white-space:nowrap; /*规定段落中的文本不进行换行*/
                text-overflow:ellipsis;
                -o-text-overflow:ellipsis;
                overflow:hidden;
                    }
        </style>
    </head>
    <body>
    <div class="text_overflow_1">
          江苏优胜信息技术有限公司主要经营：等产品。公司尊崇“踏实、拼搏、责任”的企业精神，并以诚信、共赢、开创经营理念，创造良好的企业环境，以全新的管理模式，完善的技术，周到的服务，卓越的品质为生存根本，我们始终坚持用户至上 用心服务于客户，坚持用自己的服务去打动客户。     欢迎各位新老客户来我公司参观指导工作，我公司具体的地址是：江阴市澄江中路159号A604 。     您如果对我们的产品感兴趣或者有任何的疑问，您可以直接给我们留言或直接与我们联络，我们将在收到您的信息后，会第一时间及时与您联络。
    </div>
    </body>
    </html>

二、多行文本溢出
对于现代浏览器，例如webkit内核的浏览器，或者移动端，是可以实现多行文本内容超出点点点…最后一行显示的，典型的CSS组合如下：

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
             .box {
                width: 400px;
                display: -webkit-box;
                -webkit-line-clamp: 3;/*控制在第3行出现...*/
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <div class="text_overflow_1">
          江苏优胜信息技术有限公司主要经营：等产品。公司尊崇“踏实、拼搏、责任”的企业精神，并以诚信、共赢、开创经营理念，创造良好的企业环境，以全新的管理模式，完善的技术，周到的服务，卓越的品质为生存根本，我们始终坚持用户至上 用心服务于客户，坚持用自己的服务去打动客户。     欢迎各位新老客户来我公司参观指导工作，我公司具体的地址是：江阴市澄江中路159号A604 。     您如果对我们的产品感兴趣或者有任何的疑问，您可以直接给我们留言或直接与我们联络，我们将在收到您的信息后，会第一时间及时与您联络。
    </div>
    </body>
    </html>

三、超出字数文本溢出（jquery）

        //没有css啦，只有js代码：
    $(document).ready(function(){
        //限制字符个数
        $("text_overflow").each(function(){
            var maxwidth=10;
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+'...');
            }
        });
    });

以下是完整demo，可直接复制查看效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*模拟三角效果*/
        .box {
            /*宽、高自适应*/
            /*width:200px;*/
            /*height:100px;*/
            min-width: 100px;
            margin:20px auto;
            position:absolute;
            z-index: 1001;
            left:0;
            top:28px;
            background-color: #fff;
            box-shadow: 2px 4px 6px #666;
            display: none;
            border-radius: 15px;
            padding: 10px;
            text-align: justify;
        }
        .boxcontent {
            width:100%;
            height:100%;
            color:#727272;
            font-weight: normal !important;
            border-radius: 15px;
            /*padding: 20px;*/
            display: inline-block;
            text-align: center;

        }
        .boxcontent p{height: 50px;margin: 0;line-height: 50px;}
        .boxcontent p img{float: left;position: relative;top:16px;left: 15px;width: 18px;}
        .boxcontent p span{float:left;margin-left: 25px;}
        .border-arrow {
            width:0;
            height:0;
            font-size:0;
            line-height:0;
            position:absolute;
            left:48%;
            top:-16px;
        }
        .border-arrow em,.border-arrow i {
            width:0;
            height:0;
            display:block;
            position:absolute;
            border:8px solid transparent;
            border-style:dashed dashed solid dashed;
        }
        .border-arrow em {
            border-bottom-color:#ccc;
        }
        .border-arrow i {
            border-bottom-color:#fff;
            top:1px;
        }
        .panel-header img{width: 30px;}
        .my-mask{position:fixed;z-index:1000;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);display: none;}
    </style>
</head>
<body>
<div style="position: relative;width: 100px;">
    <div class="wxz_text_overflow" style="width: 100px;">这是一段测试文本，里面有很长的字段！</div>
        <div class="box animated">
            <div class="boxcontent">

            </div>
            <div class="border-arrow"> <em></em> <i></i> </div>
        </div>
</div>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script >
    $(function(){
        $('.boxcontent').text($(".wxz_text_overflow").text());
        //限制字符个数
        $(".wxz_text_overflow").each(function(){
            var maxwidth=10;
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+'...');
            }
            //鼠标悬停显示全部信息
            $(this).hover(function () {
                $('.box').fadeIn();
            }, function () {
                $('.box').fadeOut();
            })
        });
    });
</script>
</body>
</html>

/**********111****/
[置顶] 文本溢出省略号

/*****222*********/

[置顶] 文本溢出省略号

/********333******/

[置顶] 文本溢出省略号
标签：

相关文章