<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

    </head>

    <style type="text/css">

        .line{

            width:100px;

            height:20px;

            background: blanchedalmond;

            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;

        }

        .block{

            width: 250px;

            background: greenyellow;

        }

    </style>

    <body>

        <section class="line">

            boom clap you can you up!come on!

        </section>

        <section class="block">

            the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day

        </section>

    </body>

    <script type="text/javascript">

        var wordlimit=function(){

            $(".block").each(function(){

                var copythis=$(this.cloneNode(true)).hide().css({

                    'position':'absolute',

                    'width':'auto',

                    'overflow':'visible'

                });

                $(this).after(copythis);

                if(copythis.width()>$(this).width()){

                    $(this).text($(this).text().substring(0,$(this).html().length-4));

                    $(this).html($(this).html()+'...');

                    copythis.remove();

                    wordlimit();

                }

                else{

                    copythis.remove();

                    return;

                }

            });

        }

        wordlimit();

    </script>

</html>

js实现文本框溢出文字用省略号（...）表示的更多相关文章

  1. js实现文本框输入文字个数限制代码

    html: <div class="curr_eval_box">                <input type="hidden" n ...

  2. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  3. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  4. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  5. TextBox 文本框水印文字

    #region TextBox 文本框水印文字 /// <summary> /// 基于.NET 2.0的TextBox工具类 /// </summary> public st ...

  6. iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮

    一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...

  7. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  8. JS 控制文本框只能输入中文、英文、数字与指定特殊符号

    想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...

  9. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

随机推荐

  1. 构建Docker平台【第二篇】安装 Docker

    第一步:上传安装包和 docker 镜像 1.安装包: docker-engine-1.12.1-1.el7.centos.x86_64.rpm docker-engine-selinux-1.12. ...

  2. shell-早间学习，每日一点

    1.定位行: sed -n '12,~3p' pass #从第12行开始,直到下一个3的倍数行(12-15行) sed -n '12,+4p' pass #从第12行开始,连续4行(12-16行) s ...

  3. javah的使用

    2.我们要开始写javah的命令,以便生成对应的C语言头文件 D:\我的文档\workspace\PrepareForExam\src>javah -classpath D:\我的文档\work ...

  4. Spark_总结四

    Spark_总结四 1.Spark SQL     Spark SQL 和 Hive on Spark 两者的区别?         spark on hive:hive只是作为元数据存储的角色,解析 ...

  5. homebrew常用命令

    安装 ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/Go/install)" 搜索 brew sea ...

  6. iOS下的界面布局利器-MyLayout布局框架

      Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...

  7. express 4

    http://www.expressjs.com.cn/4x/api.html#app中间件 路由 模板 跨域 json cookie session

  8. jmeter的http cookies管理器使用

    关于Cookie不过多介绍,测试UI的小伙伴们应该对此有深深的爱和恨~ 本文介绍如何:1.获取Cookie.2.保存Cookie 3.引用Cookie 最终达到Cookie类似无法失效的目的~ Coo ...

  9. lnmp pathinfo问题

    location / {              if (!-e $request_filename) {              rewrite  ^/(.*)$  /index.php/$1  ...

  10. 【SCOI2008】着色方案

    题目: http://oj.changjun.com.cn/problem/detail/pid/2027 pre.cjk { font-family: "Droid Sans Fallba ...