<!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. B-线性代数-矩阵转置

    [TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...

  2. POJ - 3646 The Dragon of Loowater

    Once upon a time, in the Kingdom of Loowater, a minor nuisance turned into a major problem. The shor ...

  3. Java通信——获取自己IP

    获取自己的IP地址 import java.net.InetAddress; import java.net.UnknownHostException; public class getip { pu ...

  4. c语言中double类型数据的输入和输出

    double a;scanf("%f",&a);   //应用scanf("%lf",&a);执行上面语句时,发现double类型的输入不能使用 ...

  5. ZCU104搭建Ubuntu桌面系统-1安装Petalinux

    参考教程: https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/18841948/Zynq+UltraScalePlus+MPSoC+-+Ubu ...

  6. 第六版PMBOK中工具与技术的介绍：数据收集数据分析数据表现

    数据收集技术: 1.头脑风暴:收集关于项目方法的创意和解决方案.2.焦点小组:召集预定的相关方和主题专家,了解他们对所讨论的产品服务或成果的期望和态度.主持人引导大家互动式讨论.3.访谈:通过与相关方 ...

  7. 21.Linux系统服务之大坑

    1.CentOS6启动流程 2.CentOS7启动流程 3.C6和C7的区别 4.运行级别C6&C7 0 关机 1 单用户模式 (超级权限 必须面对实体硬件) 2 暂未使用 3 字符界面(黑框 ...

  8. git中fatal: Authentication failed的问题

    git中fatal: Authentication failed的问题 有两种办法,一种是删除重新认证,另一种是使用Ssh 删除重新认证 有控制面板->用户账户->管理windows凭据- ...

  9. Mybatis总结之如何自动生成数据库表结构

    一般情况下,用Mybatis的时候是先设计表结构再进行实体类以及映射文件编写的,特别是用代码生成器的时候. 但有时候不想用代码生成器,也不想定义表结构,那怎么办? 这个时候就会想到Hibernate, ...

  10. unity text实现鼠标光标

    由于项目需求,需要在text上实现鼠标的cursor,并且随着点击位置cursor移动.实现方法: 1)新建一个光标的prefab(简单为之,直接在image中添加一个竖线spirte),增加脚本控制 ...