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. css+div

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. Java笔记5-修饰符,重载,递归,数组

    方法的定义修饰符 返回类型 方法名(参数列表) throws 异常类型列表 { //方法体}==如何来设计一个方法:案例:请根据如下的业务分别设计出方法1.根据给定的年份判断是否是闰年?public ...

  3. Date get period

    /** * get period for last year * @param time * @return */ public static DatePeriodDTO getLastYear(lo ...

  4. Channel States

    Introduction A channel (a call) will go through many different states during its lifetime. Here we w ...

  5. ABBYY如何使用电子邮件发送OCR结果

    ABBYY FineReader作为一款OCR图文识别软件,在识别文档之后,可以以任何受支持的格式(除HTML外),通过电子邮件发送识别结果,不仅可以发送文档,还可以发送页面图像,本文将为大家讲解如何 ...

  6. There is already an open DataReader associated with this Command which must be closed first." exception in Entity Framework

    Fixing the "There is already an open DataReader associated with this Command which must be clos ...

  7. JS教程:获取当前地址栏URL

    URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成:scheme://host:port/path?query#fragment s ...

  8. 使用WebView加载assets下的html文件

    有时候,我们需要将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示出来,比如给页面一个默认的显示,这样子看起来效果要好很多.代码如下: pri ...

  9. [内核]Linux workqueue

    转自:http://blog.chinaunix.net/uid-24148050-id-296982.html 一.workqueue简介workqueue与tasklet类似,都是允许内核代码请求 ...

  10. 【MySQL】主备复制

    复制对于mysql的重要性不言而喻,mysql集群的负载均衡,读写分离和高可用都是基于复制实现.下文主要从4个方面展开,mysql的异步复制,半同步复制和并行复制,最后会简单聊下第三方复制工具.由于生 ...