文本溢出省略号

来源：互联网发布：淘宝erp是什么意思编辑：程序博客网时间：2024/05/17 07:52

最近开发过程中，经常遇到文本溢出的显示问题。现归纳一下几种方法。
早在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******/

这里写图片描述

阅读全文

1 0