实现了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. 【XLL 文档翻译】【第2部分】C API 回调函数 Excel4, Excel12

    Excel4 和 Excel12 函数使得 DLL 可以调用 Excel 工作表函数.宏表函数.命令.XLL特定函数或命令.最近的一些 Excel 版本都支持 Excel12 函数.这两个函数支持下面 ...

  2. 使用cocoapods导入第三方类库后 头文件没有代码提示？

    选择Target -> Build Settings 菜单,找到\”User Header Search Paths\”设置项 新增一个值"${SRCROOT}",并且选择\ ...

  3. mongodb3.2配置文件yaml格式 详解

    mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...

  4. oracle两时间相减得到相差的时间

    1.months_between(date1,date2);date1和date2相减得到相差的月份. select months_between(to_date('2015-05-11','yyyy ...

  5. 公共增删改查(MVC+三层架构)

    1.建立数据访问层:新建一个项目,选择类库,命名为XXXDAL,然后把新生成的类删除,重新建一个类BaseDal,代码如下: public class BaseDal<T> where T ...

  6. C# 如何保证对象线程内唯一：数据槽（CallContext）

    如果说,一个对象保证全局唯一,大家肯定会想到一个经典的设计模式:单例模式,如果要使用的对象必须是线程内唯一的呢? 数据槽:CallContext,ok看下msdn对callcontent的解释. Ca ...

  7. javaWeb四大域对象

    servletContext Request HttpSession pageContext 详细参考:http://www.tuicool.com/articles/NJfyMrn

  8. 使用vsphere client 克隆虚拟机

    免费的VMWare ESXi5.0非常强大,于是在vSphere5.0平台中ESXi取代了ESX.,使用ESXi经常会遇到这样的问题,我需要建立多个虚拟机,都是windows2003操作系统,难道必须 ...

  9. 继承下public,protected,private访问权限

    C++中派生类对基类成员的访问形式主要有以下两种: 1.内部访问:由派生类中新增成员对基类继承来的成员的访问. 2.对象访问:在派生类外部,通过派生类的对象对从基类继承来的成员的访问.今天给大家介绍在 ...

  10. Paragon NTFS for Mac® Yosemite - 免费下载

    文章链接:http://www.paragon-software.com/cn/home/ntfs-mac-yosemite/registration.html