实现了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. HDU 5920 Ugly Problem 高精度减法大模拟 ---2016CCPC长春区域现场赛

    题目链接 题意:给定一个很大的数,把他们分为数个回文数的和,分的个数不超过50个,输出个数并输出每个数,special judge. 题解:现场赛的时候很快想出来了思路,把这个数从中间分为两部分,当位 ...

  2. 前端性能优化（DOM篇）

    原文链接:https://segmentfault.com/a/1190000000490322 缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根 ...

  3. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（十） 之 自定义系统消息和总结

    前言 本篇主要讲解一个东西,就是我们自定义系统消息.效果如下: 首先我们要做的准备工作就是改写 layim 的消息模板,如果不改的话就成为某个用户发送的消息了,那么体验就稍微差一些.找到模板我们看一下 ...

  4. XMPP框架下微信项目总结（7）聊天通信处理-发送，接受数据

    前言:通其他的功能处理一样,聊天也是通过模块发起的成为:“消息模块” 原理:1 current客户端开启通过消息模块开启并监听消息(监听通过代理). 2 当“current客户端”收到来自“other ...

  5. HTTP长连接和短连接原理浅析

    原文出自:HTTP长连接和短连接原理浅析

  6. javaWeb---文件上传（commons-FileUpload组件）

    FileUpload是Apache组织(www.apache.org)提供的免费的上传组件,但是FileUpload组件本身还依赖于commons组件,所以从Apache下载此组件的时候还需要连同co ...

  7. Swift - 推送之本地推送(UILocalNotification)添加Button的点击事件

    上一篇讲到的本地推送是普通的消息推送,本篇要讲一下带按钮动作的推送消息 import UIKit @UIApplicationMain class AppDelegate: UIResponder, ...

  8. Clr Via C#读书笔记---线程基础

    趣闻:我是一个线程:http://kb.cnblogs.com/page/542462/ 进程与线程 进程:应用程序的一个实例使用的资源的集合.每个进程都被赋予了一个虚拟地址空间. 线程:对CPU进行 ...

  9. SQLServer子查询

    in谓词子查询 select * from dbo.Worker where did in (select dID from DepartMent) 比较运算子查询 select * from Wor ...

  10. 怎么把MVC的Controller拆分写到别的类库

    以为很难…… 其实直接继承Controller 并且按MVC_Controllser规则命名. 然后网站项目引用该项目即可.