1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  7.     </head>
  8.     <style type="text/css">
  9.         .line{
  10.             width:100px;
  11.             height:20px;
  12.             background: blanchedalmond;
  13.             overflow: hidden;
  14.             white-space: nowrap;
  15.             text-overflow: ellipsis;
  16.         }
  17.         .block{
  18.             width: 250px;
  19.             background: greenyellow;
  20.         }
  21.     </style>
  22.     <body>
  23.         <section class="line">
  24.             boom clap you can you up!come on!
  25.         </section>
  26.         <section class="block">
  27.             the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day
  28.         </section>
  29.  
  30.     </body>
  31.     <script type="text/javascript">
  32.         var wordlimit=function(){
  33.             $(".block").each(function(){
  34.                 var copythis=$(this.cloneNode(true)).hide().css({
  35.                     'position':'absolute',
  36.                     'width':'auto',
  37.                     'overflow':'visible'
  38.                 });
  39.                 $(this).after(copythis);
  40.                 if(copythis.width()>$(this).width()){
  41.                     $(this).text($(this).text().substring(0,$(this).html().length-4));
  42.                     $(this).html($(this).html()+'...');
  43.                     copythis.remove();
  44.                     wordlimit();
  45.                 }
  46.                 else{
  47.                     copythis.remove();
  48.                     return;
  49.                 }
  50.             });
  51.         }
  52.         wordlimit();
  53.     </script>
  54. </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. d3.js 绘制北京市地铁线路状况图(部分)

    地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件 ...

  2. Github配合Jenkins，实现vue等前端项目的自动构建与发布

    本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos). 之前做前端项目的部署,一直都是手动运行打包命令,打包完.再使用FTP.Xshell等这类的 ...

  3. Http协议Content-Length详解

    前言 http协议是互联网中最重要的协议之一,虽然看上去很简单,但是实际中经常遇到问题,我们就已经遇到好几次了.有长连接相关的,有报文解析相关的.对http协议不能一知半解,必须透彻理解才行.本文通过 ...

  4. 问题TypeError: __init__() takes 1 positional argument but 2 were given解决方案

    在搭建自动化框架时,遇到一个问题,如下图: 根据报错的意思,应该是__init__函数的问题, 位置应该是HomePage文件 立马去查看一下文件,如图: 原来是因为的粗心大意__init__(sel ...

  5. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  6. python编程基础之二十八

    装饰器:说白了就是闭包,但是内部函数调用外部变量调用的是函数, 好处:就是在不用修改原函数代码的前提下给函数增加新的功能 装饰器有两种写法 第一种: #被修饰的函数 def say_hello(nam ...

  7. 【DP合集】合并 union

    给出一个 1 ∼ N 的序列 A ( A 1 , A 2 , ..., A N ) .你每次可以将两个相邻的元素合并,合并后的元素权值即为 这两个元素的权值之和.求将 A 变为一个非降序列,最少需要多 ...

  8. Vue-CLI项目快速UI布局-element-ui

    0902自我总结 Vue-CLI项目快速UI布局-element-ui 一.element-ui的地址 https://element.eleme.cn/ 二.element-ui的安装 <!- ...

  9. 聊聊面试-int和Integer的区别

    最近面试了很多候选人,发现很多人都不太重视基础,甚至连工作十几年,项目经验十几页的老程序员,框架学了一大堆,但是很多 Java 相关的基础知识却很多都答不上来.还有很多人会回答,只知道要用,但是从来不 ...

  10. windows服务隐藏后门之克隆帐号

    windows服务隐藏后门之克隆帐号 1.CMD命令行下,建立了一个用户名为“test$”,密码为“abc123!”的简单隐藏账户,并且把该隐藏账户提升为了管理员权限. PS:CMD命令行使用&quo ...