<!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. JVM内存分配与回收策略

    对象优先在Eden分配 大多数情况下,对象在新生代Eden区中分配. 当Eden区没有足够空间进行分配时,虚拟机将发起一次Minor GC. Minor GC:新生代GC,指发生在新生代的垃圾收集动作 ...

  2. groovy学习(三)range

    // 1900..1999 包含边界// 2000..<2100 不包含边界twentiethCentury = 1900..1999reverseTen = 10..1println(twen ...

  3. [译]AngularJS 1.3.0 开发者指南(一) -- 介绍

    [译]AngularJS 1.3.0 开发者指南(一) -- 介绍 Angular是什么 ? AngularJS是一款针对动态web应用的结构框架. 它可以让像使用模板语言使用HTML, 并且可以扩展 ...

  4. 存储过程与SQL语句如何选择

    58到家数据库30条军规,有一条是“禁止使用存储过程.视图.触发器.Event”, 高并发大数据的互联网业务,架构设计思路是“解放数据库CPU,将计算转移到服务层”, 并发量大的情况下,这些功能很可能 ...

  5. 深入探讨 CSS 特性检测 @supports 与 Modernizr

    什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验 ...

  6. ftp服务搭建

    文件传输服务 主配置文件目录/etc/vsftpd/vsftpd.conf 首先安装ftp服务器 yum install vsftpd 默认存放文件的目录  /var/ftp/pub 匿名登陆 创建一 ...

  7. PostgreSQL指南

    PostgreSQL指南 历史简介 最近几年Postgres的关注度变得越来越高. 它加快了Postgres的发展步伐, 与此同时其他 的关系数据库系统的发展放缓. 在数据库领域中 Postgre S ...

  8. Node.js~在linux上的部署~pm2管理工具的使用

    之前写了两篇关于在linux上部署nodejs的文章,大家如果没有基础可以先看前两篇<Node.js~在linux上的部署>,<Node.js~在linux上的部署~外网不能访问no ...

  9. Redis简单配置和使用

    学到Redis中需要整理和配置的东西比较多,资源也是比较分散!这次的主要还是将知识整合一下,开发过程中所需要的资源整合一下,也方便今后涉及到这块地方的知识时,将时间大量浪费在了找这些资源上了! 一.R ...

  10. Java版本

    Java版本 Java版本分为J2SE(Java 2 Standard Edition,Java标准版).J2ME(Java 2 Micro Edition,Java微型版本)和J2EE(Java 2 ...