<!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. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  2. 关于client浏览器界面文字内容溢出用省略号表示方法

    在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...

  3. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  4. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  5. CSS实现单行、多行文本溢出显示省略号（…）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  6. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  7. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  8. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  9. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

随机推荐

  1. 基于Influxdb对InfluxDBResultMapper的一点扩展

    理想很饱满,现实很骨感. 由于业务需要"灵活可配置"的功能需求,在使用java开发Influxdb查询功能的时候,遇到了一个问题,Measurement注解的名称有可能需要动态变化 ...

  2. Json模块(dumps、loads、dump、load)函数篇

    # dumps.loads函数 """json.dumps()用于将dict类型的数据转成strjson.loads()用于将str类型的数据转成dict. " ...

  3. http服务端架构演进

    摘要 在详解http报文相关文章中我们介绍了http协议是如何工作的,那么构建一个真实的网站还需要引入组件呢?一些常见的名词到底是什么含义呢? 什么叫正向代理,什么叫反向代理 服务代理与负载均衡的差别 ...

  4. hydra暴力破解

    hydra,是一个非常好用的暴力破解工具,而且名字也很cool. 下面是官网上的介绍: AFP, Cisco AAA, Cisco auth, Cisco enable, CVS, Firebird, ...

  5. HTTPS 验证访问略记

    背景 互联网刚刚兴起的时候,网络安全并没有被很好的重视.HTTP 是明文传输的,这为意图谋不道德之事者提供了诸多的便利.当越来越多的人利益受到侵害的时候,开始重视网络传输的安全问题了. HTTPS 加 ...

  6. PHP 调试脚本

    如果想要通过php.exe直接运行和调试脚本,可以在PHPStorm配置如下: 1.PHP安装XDebug的扩展. 2.在PHPStorm中,配置XDebug: 1) 打开菜单 "文件&qu ...

  7. opencv::模糊图像

    Smooth/Blur 是图像处理中最简单和常用的操作之一,使用该操作的原因之一就为了给图像预处理时候减低噪声 使用Smooth/Blur操作其背后是数学的卷积计算,通常这些卷积算子计算都是线性操作, ...

  8. linux-pclint代码检测

    win10.ubuntu16.04, vs2017. 1.安装pc-lint到C盘. 2.将linux下的usr整个目录打包拷贝到win10某盘下. 3.获取lint检测linux c++ 代码的宏参 ...

  9. SpringBoot HATEOAS用法简介

    REST风格简介 介绍HATEOAS之前先简单介绍一下REST,REST 是 Representational state transfer 的缩写,翻译过来的意思是表达性状态转换.REST是一种架构 ...

  10. day27作业

    FTP需求 客户端可以注册登录 client:输入一个login sever:执行login 客户端登陆后可以选择文件夹上传与下载 client:输入一个upload,download sever:执 ...