实现了div中字数较多，显示不下的时候，用省略号来表示，并且可以展开和收起：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 </head>

 <body>

 <div id="hutia" style="word-wrap: break-word;

  word-break: normal;width:200px;height:300px;">我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，

 </div>

 <script type="text/javascript">

 var div = document.getElementById("hutia");

 var str = div.innerHTML;

  var span = document.createElement("span");

  var open = document.createElement("a");

  if (str.length>50){

  div.innerHTML = str.substring(0,50);

  open.innerHTML = "...展开";

  open.href="#";

 div.appendChild(open);

 open.onclick = function(){

  if(open.innerHTML == "...展开"){

   open.innerHTML = "收起";

   div.innerHTML = str;

   div.appendChild(open);

 }

 else{

  open.innerHTML = "...展开";

 div.innerHTML = str.substring(0,50);

 div.appendChild(open);

 }

 }

 }

 </script>

 </body>

 </html>

js小例子（多字溢出，省略号表示）的更多相关文章

  1. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  2. js小例子（简单模糊匹配输入信息）

    该例子实现的是用户输入信息或者字母时可以搜索出来,鼠标点击选择 <!DOCTYPE html> <html> <style> p{ width:200px; hei ...

  3. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  4. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

  5. JS操作Cookies的小例子

    这篇文章介绍了JS操作Cookies的小例子,有需要的朋友可以参考一下. 您可能感兴趣的文章:js 保存与获取cookie的代码javascript cookie操作实例详解javascript co ...

  6. Vue.js的小例子--随便写的

    1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...

  7. js 回调函数小例子

    js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...

  8. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  9. JS的for循环小例子

    1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...

随机推荐

  1. xcode报错，svn ： is not a workingCopy

    解决方案: 1.点击对应的targets 2.选择build phases 3.在红框处有一个run script选项(截图中已经删除了.),点击下拉按钮,看看是否是与svn有关的东西, 如果是,删除 ...

  2. jvm分析

    是什么 jps   查看所有的jvm进程,包括进程ID,进程启动的路径等等. jstack   观察jvm中当前所有线程的运行情况和线程当前状态. 系统崩溃了?如果java程序崩溃生成core文件,j ...

  3. 解决spring+shiro cacheManager 登录报错

    一.项目启动,登录报错 org.springframework.beans.factory.BeanCreationException: Error creating bean with name ' ...

  4. C语言字母频率统计

    在进行密码破解时有时候需要得到字母出现的频率信息,下面我将简单的使用C语言来读取一个文件,然后统计该文件内的字母出现的频率. 1.在D盘下新建一个文本文件(文件名为"A.txt") ...

  5. monkey测试

    一.理解monkey测试 1.Monkey测试是Android自动化测试的一种手段.Monkey测试本身非常简单,就是模拟用户的按键输入,触摸屏输入,手势输入等,看设备多长时间会出异常. 2.当Mon ...

  6. JavaScript基础——定义变量

    在JavaScript中使用变量来临时存储和访问来自JavaScript文件的数据.变量既可以指向简单的数据类型,如数字或者字符串:也可以指向更复杂的数据类型,比如对象. 在JavaScript中定义 ...

  7. python 中内存映射二进制文件

    内存映射一个文件并不会导致整个文件被读取到内存中. 也就是说,文件并没有被复制到内存缓存或数组中.相反,操作系统仅仅为文件内容保留了一段虚拟内存. 当你访问文件的不同区域时,这些区域的内容才根据需要被 ...

  8. php文件上传进度条例子

    <?php session_start(); ?> <!DOCTYPE html> <html lang="zh-CN"> <head&g ...

  9. 重温WCF之WCF传输安全（十三）（2）基于SSL的WCF匿名客户端（转）

    转载地址:http://www.cnblogs.com/lxblog/archive/2012/09/13/2683514.html 这一篇我们利用上一篇制作的证书,来演示一个基于SSL的WCF服务, ...

  10. IReport问题整理

    1. 问题:IReport如何实现变量字段$F{ propertyName}赋值为一个NULL对象时不显示”null”, 而显示为空白? 解决方法:选中动态单元格,右键选择属性,在弹出对话框TextF ...