<!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. ES(Elastic Search)update操作设置无 docment时进行insert

    最近使用一套数据加工中间工具,查看es操作中的update操作.其中方法命名为updateOrInsert.但是没发现代码中有ES的insert方法调用.于是仔细分析了代码逻辑. 经过一路追溯,直至E ...

  2. 可能是国内第一篇全面解读 Java 现状及趋势的文章

    作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! 导读:InfoQ 发布<2019 中国 Java 发展趋势报告>,反映 Java 在 ...

  3. KafkStream架构

    Kafka Stream 的整体架构图如下. 目前KafkaStream的数据源智能是如上图所示的Kafka,但是处理结果并不一定是如上图所示的输出到Kafka,实际上KStream和Ktable的实 ...

  4. 洛谷 P3745 [六省联考2017]期末考试

    题目描述 有 nnn 位同学,每位同学都参加了全部的 mmm 门课程的期末考试,都在焦急的等待成绩的公布. 第 iii 位同学希望在第 tit_iti​ 天或之前得知所有课程的成绩.如果在第 tit_ ...

  5. C#输入中文实现转拼音首字母（亲测，字库不全）

    public string GetPYString(string str) { string tempStr = ""; foreach (char c in str) { if ...

  6. cobalt strike笔记-CS与MSF,Armitage,Empire互转shell

    0x01 Metasploit派生shell给Cobaltstrike 生成木马: msfvenom -p windows/meterpreter/reverse_tcp -e x86/shikata ...

  7. luoguP1006 传纸条

    题目描述 Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个 m" role="presentation& ...

  8. [Luogu2323] [HNOI2006]公路修建问题

    题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 输入输出样例 输入样例#1: 复制 4 2 5 1 2 6 5 1 3 3 1 2 3 9 4 2 4 6 1 输出 ...

  9. 实用---生命游戏 Java

    本程序由四个类组成: 其中Init_data,用于初始化各个活细胞的状态judge_state,用于判断下一代的细胞状态,并进行更新.set_color,用于给GUI界面中各个细胞涂色set_fram ...

  10. Unity3D 通过JSON查询天气

    一.天气查询API 获取天气信息,首先要找到提供天气数据的接口,我使用的是高德地图免费为我们提供的,网址为 https://lbs.amap.com/api/webservice/guide/api/ ...