HTML代码：

<body>

    <div class="txt_bos"><!--在每一个放置文字的class外面包一个div，以便设置动画样式用，同样用class-->

        <div class="txt1"><!--为了保证功能的通用性，这里全用class-->

            石村，位于苍莽山脉中，四周高峰大壑，茫茫群山巍峨。

    清晨，朝霞灿灿，仿若碎金一般洒落，沐浴在人身上暖洋洋。

    一群孩子，从四五岁到十几岁不等，能有数十人，在村前的空地上迎着朝霞，正在哼哈有声的锻炼体魄。一张张稚嫩的小脸满是认真之色，大一些的孩子虎虎生风，小一些的也比划的有模有样。

    一个肌体强健如虎豹的中年男子，穿着兽皮衣，皮肤呈古铜色，黑发披散，炯炯有神的眼眸扫过每一个孩子，正在认真指点他们。

        </div>

    </div>

    <div class="txt_bos">

        <div class="txt1">

            “太阳初升，万物初始，生之气最盛，虽不能如传说中那般餐霞食气，但这样迎霞锻体自也有莫大好处，可充盈人体生机。一天之计在于晨，每曰早起多用功，强筋壮骨，活血炼筋，将来才能在这苍莽山脉中有活命的本钱。”站在前方、指点一群孩子的中年男子一脸严肃，认真告诫，而后又喝道：“你们明白吗？”

    “明白！”一群孩子中气十足，大声回应。

    山中多史前生物出没，时有遮蔽天空之巨翼横过，在地上投下大片的阴影，亦有荒兽立于峰上，吞月而啸，更少不了各种毒虫伏行，异常可怖。

    “明白呀。”一个明显走神、慢了半拍的小家伙奶声奶气的叫道。

        </div>

    </div>

    <div class="txt_bos">

        <div class="txt1">

            这是一个很小的孩子，只有一两岁的样子，刚学会走路没几个月，也在跟着锻炼体魄。显然，他是自己凑过来的，混在了年长的孩子中，分明还不应该出现在这个队伍里。

    “哼哼哈嘿！”小家伙口中发声，嫩嫩的小手臂卖力的挥动着，效仿大孩子们的动作，可是他太过幼小，动作歪歪扭扭，且步履蹒跚，摇摇摆摆，再加上嘴角间残留的白色奶渍，引人发笑。

    一群大孩子看着他，皆挤眉弄眼，让原本严肃的晨练气氛轻缓了不少。

    小不点长的很白嫩与漂亮，大眼睛乌溜溜的转动，整个人像是个白瓷娃娃，很可爱，稚嫩的动作，口中咿咿呀呀，憨态可掬。这让另一片场地中盘坐在一块块巨石上正在吞吐天精的一些老人也都露出笑容。

    就是那些身材高大魁梧、上半身**、肌腱光亮并隆起的成年男子们，也都望了过来，带着笑意。他们是村中最强壮的人，是狩猎与守护这个村落的最重要力量，也都在锻体，有人握着不知名的巨兽骨骼打磨而成的白骨大棒，也有人持着黑色金属铸成的阔剑，用力舞动，风声如雷。

        </div>

    </div>

</body>

CSS样式表：

<style type="text/css">

        * {

            -moz-user-select: -moz-none;

            -moz-user-select: none;

            -o-user-select: none;

            -khtml-user-select: none;

            -webkit-user-select: none;

            -ms-user-select: none;

            user-select: none;

        }

        .txt_bos {

            position: relative;

            width: 500px;

            height: 25px;

            margin-top: 50px;

            left: 400px;

            background-color: yellow;

            overflow: hidden;

        }

        .txt1 {

            position: relative;

            width: 100%;

            height: 25px;

            font-family: 微软雅黑;

            font-size: 20px;

            word-wrap: break-word;

            overflow: hidden;

        }

    </style>

JQuery 代码：

<script src="js/jquery-1.7.1.min.js"></script>

    <script src="js/jquery.color.js"></script>

<script type="text/javascript">

        $(document).ready(function () {

            var MaxLength = 36;//先设置一个变量用做第一行最多显示的长度

            var txt = new Array();//定义一个数组

            var texts = $(".txt1");//获取一下每一个放置文字的div，一组div

            for (var i = 0; i < texts.length; i++) {//写一个循环，循环次数为所有放置文字div的数量

                if (texts.eq(i).text().length > MaxLength) {

                    texts.eq(i).parent().index(i);//给每个索引上的div的父级赋一个index属性，也就是这个段文字在数组内的索引

                    txt[i] = texts.eq(i).text();//将获取的一组文字div按照索引一次将文字放进数组

                    var st = texts.eq(i).text().substr(0, MaxLength) + '...';//一上来默认第一行显示长度为上面定义的变量长度，后面加...放进变量

                    texts.eq(i).text(st);//再将变量给每组文字的显示

                }

            }

            //每组文字div的点击事件

            $(".txt1").click(function () {

                if ($(this).outerHeight() > 27) {//如果这个div的高度超过了每行的高度，则执行超出部分隐藏

                    $(this).text($(this).text().substr(0, MaxLength) + '...');//将显示文字重新定义为初始状态

                    //给外面包着的div，也就是父级div写一个动画，高度为目前重新定以后文字高度，400毫秒慢慢缩回，用到animate

                    $(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'yellow' }, 400);

                }

                else {//如果没有超过每行高度，也就是为初始状态的时候，点击需要慢慢下拉打开

                    $(this).text(txt[$(this).parent().index()]);//通过父级的index值找到数组内对应索引的文字，将其显示

                    $(this).css('height', 'auto');//设置这个div的css样式，高度为文字显示高度

                    //因为父级div样式表中设置超出部分隐藏，用animate将高度慢慢下拉至子及div，也就是文字div目前的高度，400毫秒执行完毕

                    $(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'white' }, 400);

                }

            });

        });

    </script>

JQuery 简单的文字超出部分隐藏下拉显示的更多相关文章

  1. jQuery点击页面其他部分隐藏下拉菜单

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...

  2. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  3. DataGridView单元格内容自动匹配下拉显示

    页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信 ...

  4. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. FineReport——JS二次开发（隐藏下拉框控件的倒三角）

    在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...

  6. 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  7. css 文字超出部分隐藏

    未做隐藏处理 执行结果: 1.1行超出部分省略号 效果: 2.多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容) 效果: -webkit-line-clamp 属性定义显示行数可 ...

  8. JQuery和ASP.NET分别实现级联下拉框效果

    在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...

  9. RecyclerView上拉隐藏Toolbar,下拉显示

    RecyclerView下拉隐藏Toolbar,上拉显示效果图 先说个事:最近我准备做个开源的博客园android客户端!符合Google最新的material design设计风格的!不知道有没有小 ...

随机推荐

  1. Spring总结

    此君也是使用过多时了,却从来没有系统的总结过 以下,弥补,盼不晚: Spring为什么是框架&容器 1.框架的原因: 其提供多个组件的搭建,和支持其他事务事件,符合框架定义 ps:什么是框架呢 ...

  2. 2016.1.4~2016.1.7真题回顾！-- HTML5学堂

    2016.1.4~2016.1.7真题回顾!-- HTML5学堂 2015悄然而逝,崭新的2016随即而行!生活需要新鲜感,学习JavaScript的过程需要有成就感!成就感又是来自于每一天的不断练习 ...

  3. Python 100道题深入理解

    # -*- coding: utf-8 -*-# 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?# 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所 ...

  4. CentOS7 桌面的安装

    对于linux桌面的安装,我们还是要先安装yum 1:查询桌面组件是否安装成功 yum grouplist #查询桌面组件 #由于我这里安装了,所以桌面菜单显示在已安装 2:选取我们要安装的组件 yu ...

  5. Delphi ActiveX Form的使用实例

    Delphi ActiveX Form的使用实例 By knityster 1. ActiveX控件简介 ActiveX控件也就是一般所说的OCX控件,它是ActiveX技术的一部分. ActiveX ...

  6. Silverlight管理系统源代码（SilverlightOAFlame开发框架主要提供二次开发）

    Silverlight OA系统简介 系统功能简介 l 程序界面介绍: 左侧为主菜单,主菜单可以展开和收起,主菜单下面的所有模块都可以在数据库中扩展增加,模块的权限和用户角色挂钩,可以在数据库中创建多 ...

  7. Glide 下载Gif文件

    之前做了一个类似朋友圈里的查看大图功能,现在也要加上保存功能. 保存图片有很多思路,可以从imageview里提取bitmap,可以用url下载到本地.imageview提取的话,gif图就会变成一张 ...

  8. C语言面试题

    #include <stdio.h> int main() { ] = {, , , , }; ); // <==> (unsigned int)&a+sizeof(* ...

  9. 3、Linux 获取帮助的方法-关机命令-7个系统启动级别

    1.获取帮助的方法: (1).命令 -h 或--help (2).man man 命令  --->/user 查看user选项 /选项 ---->n 查看下一项 2.关机命令 (1).sh ...

  10. （转）原始图像数据和PDF中的图像数据

    比较原始图像数据和PDF中的图像数据,结果见表1.1.表1.1中各种“解码器”的解释见本文后续的“PDF支持的图像格式”部分,“PDF中的图像数据”各栏中的数据来自开源的PdfView.如果您有兴趣查 ...