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. XML实体注入漏洞

    XML实体注入漏洞 测试代码1: 新建xmlget.php,复制下面代码 <?php $xml=$_GET['xml']; $data = simplexml_load_string($xml) ...

  2. centos添加PATH环境变量

    1.cd ~ 2.vi .bashrc 3.在代码末尾增加一行: export PATH =/path/to/target-dir/bin:$PATH 4.source .bash_profile立即 ...

  3. JSP知识点汇总

    有几种方法可以实现服务器内部跳转? 使用request对象提供的方法:request.getRequestDispatcher(String URI).forward(ServletRequest r ...

  4. 怎么使用jquery判断一个元素是否含有一个指定的类（class）

    在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能.2种方法如下:(个人喜欢用hasClass()) 1.           hasClass( ...

  5. Django中ImageField的使用

    http://blog.csdn.net/u013690521/article/details/38777213 from django.db import models from django.co ...

  6. （转）The AlphaGo Replication Wiki

    The AlphaGo Replication Wiki 摘自:https://github.com/Rochester-NRT/RocAlphaGo/wiki/01.-Home Contents : ...

  7. Java条形码生成技术-Barcode4j

    背景 目前二维码的应用场景已经遍布各类互联网平台,通常是将产品/商品的唯一编号存储于二维码中以做扫码识别. 而用于生产环境的条形码技术仍然存在,如硬件设备制造.供应.物流运输等等. 在常见的产品信息管 ...

  8. [转]Vs解决方案的目录结构设置和管理

    原文地址:[转]Vs解决方案的目录结构设置和管理 作者:大明   以下内容为“原创”+“转载” 首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对 ...

  9. Java 学习总结（一）

    1.     概述 1.1           dos命令行--常见的命令 l  dir : 列出当前目录下的文件以及文件夹 l  md : 创建目录 l  rd : 删除目录 l  cd : 进入指 ...

  10. Spring Boot中使用Swagger2构建强大的RESTful API文档

    由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这 ...