黑马程序员技术交流社区

标题: 溢出隐藏怎么实现？ [打印本页]

---

作者: 庭院深深深几许    时间: 2019-1-4 14:16
标题: 溢出隐藏怎么实现？
溢出隐藏可以用下面的几种方法来实现：

[CSS] 纯文本查看 复制代码

/*

溢出隐藏

*/

overflow: hidden;

/*

显示省略号

*/

text-overflow: ellipsis;

/*

不换行

*/

white-space: nowrap;

js实现多行溢出隐藏
jsp页面
<dd class="user_star_dd"><p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p></dd>
CSS代码

[CSS] 纯文本查看 复制代码

overflow: hidden;

height: 30px;

js代码

[JavaScript] 纯文本查看 复制代码

$(function(){

// 文字隐藏

        $(".user_star_dd").each(

                        function(i) {

                                var divH = $(this).height();

                                var $p = $("p", $(this));

                                while ($p.outerHeight() > divH) {

                                        $p.text($p.text().replace(

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

        };

});

})

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2