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. Codeforces Round #159 (Div. 2)

    A. Sockets 当插口数不够时,显然找最大\(a_i\)进行扩展. B. Playing Cubes 枚举起始颜色,Petya会尽可能相同颜色,Vasya则相反. C. View Angle 极 ...

  2. 【转载】ANSYS动力学分析-瞬态分析

    原文地址:http://www.cnblogs.com/ylhome/archive/2009/12/02/1615172.html 三种求解方法 瞬态动力学分析可采用三种方法:完全(Full)法.缩 ...

  3. poj3592 强连通+记忆化搜索

    题意:有一片 n*m 的矿地,每一格有矿.或这传送门.或者挡路岩石.除了岩石不能走以外,其他的格子都能够向右或向下走,走到一个非岩石的格子.对于每一个矿点,经过它就能得到它的所有矿石,而对于每一个传送 ...

  4. Nginx-限制汇总

    http块 limit_conn_zone $binary_remote_addr zone=connperip:10m; limit_conn_zone $server_name zone=conn ...

  5. Sea.js学习5——Sea.js的构建工具spm

    如果项目遵循推荐的标准目录结构: foo-module/ |-- dist 存放构建好的文件 |-- src 存放 js.css 等源码 | |-- foo.js | `-- style.css `- ...

  6. iPhone SlideShow

    If you found any question when you use the Slideshow, don't hesitate to leave a message please.

  7. 深入浅出WPF开发下载

    ​为什么要学习WPF? 许多朋友也许会问:既然表示层技术那么多,为什么还要推出WPF作为表示层技术呢?我们话精力学习WPF有什么收益和好处呢,这个问题我们从两个方面进行回答. 首先,只要开发表示层程序 ...

  8. 黄聪：Wordpress二级域名共享用户cookie出现错误解决方案及WP的Cookie机制

    在若干年以前,我刚开始折腾Wordpress没多久的时候,就自己摸索过 多个Wordpress网站共享一份数据表的实现方法 .这种看起来好像很高大上的类SSO功能,能够给用户在多个网站之间提供快速.无 ...

  9. RelativeLayout_布局

    RelativeLayout布局 android:layout_marginTop="25dip" //顶部距离 android:gravity="left" ...

  10. (String) 205.Isomorphic Strings

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...