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. python知识点记录（一）：

    1.如何使print输出不换行: 在print语句末尾加上一个英文逗号. 2.安装第三方模块时,用pip和easy_install是一样的.下载一个setuptools.exe安装好就有easy_in ...

  2. linux之虚拟机搭建

    平台:win8.1 软件:VMware 虚拟机:centos7mini 1.下载ios镜像 http://centos.org/download/ 2.在VMware上面安装ios镜像 3.设置网卡连 ...

  3. 工具第二天 cocoaPods 私有库的创建

    之前介绍了cocoaPods的安装与使用,今天简单谈一下 自己的私有库运用cocoaPods依赖. cd到需要做库的工程目录下 创建一个podspec文件 创建:pod spec create 名称 ...

  4. LeetCode 【190. Reverse Bits】

    Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...

  5. JavaWeb用Jdbc操作MySql数据库(二)

    一.仍然使用前面的环境和示例数据库. 二.建立发出注册请求的页面index3.jsp. <%@ page language="java" import="java. ...

  6. jQuery radio change事件 checkbox选中事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. MapReduce的输入输出

    mapper和reducer的划分 mapper的数量等于输入文件被划分成的分块数,这取决于输入文件的大小以及文件块的大小.一个map操作只处理一个输入分片.运行作业的客户端通过调用getSplits ...

  8. iOS 关于GCD中的队列

    GCD中队列分类及获得方式 1.串行队列  dispatch_queue_t queue = dispatch_queue_create("队列名", DISPATCH_QUEUE ...

  9. 一些实用的linux命令

    一直在用linux,可linux下的命令还是用得不是很熟悉,记录一下比较有用命令: ``和$()是一样的,都是用指令的执行结果来替换. linux下 echo hello    world => ...

  10. Oracle linux6.1配置yum本地源

    一.准备工作1. Linux安装盘插入光驱2. 挂载光驱 [root@localhost ~]# mount /dev/cdrom /mnt/ mount: block device /dev/sr0 ...