实现了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. NEFU 84 五指山 (扩展欧几里得)

    五指山 Problem:84 Time Limit:1000ms Memory Limit:65536K Description 西游记中孙吾空大闹天宫,如来佛祖前来降伏他,说道:"我与你打 ...

  2. android bitmap的放大缩小

    private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f) ...

  3. 第一个JAVA创建

    1.file-new-java project  创建项目文件夹 2.在项目文件夹new-class 3.java对大小写比较敏感 输入代码 public class HELLOWORD { publ ...

  4. 数据结构和算法 – 8.链表

    8.1.数组存在的问题 在处理列表的时候数组是常用的数据结构.数组可以对所存储的数据项提供快速地存取访问,而且它很易于进行循环遍历操作.当然,数组已经是语言的一部分了,用户不需要使用额外的内存,也不需 ...

  5. MVC - 10.CodeFrist

    微软示例 1.(对新数据库使用 Code First):http://msdn.microsoft.com/zh-cn/data/jj193542 2.(连接和模型):http://msdn.micr ...

  6. Java集合源码学习（二）ArrayList分析

    >>关于ArrayList ArrayList直接继承AbstractList,实现了List. RandomAccess.Cloneable.Serializable接口,为什么叫&qu ...

  7. PHP求时间间隔 n天、周、月、年后的时间

    <?php date_default_timezone_set('PRC'); // 设置时区 $date1 = strtotime('2015-01-01'); //把日期转换成时间戳 $da ...

  8. Delphi中record和packed record的区别

    转载:http://blog.csdn.net/rznice/article/details/6566978 第一种不带packed关键字的结构体表明编译器编译时要求进行字对齐. 而第二种带packe ...

  9. Babelfish（二分查找，字符串的处理略有难度，用sscanf输入）

    Babelfish Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 28581   Accepted: 12326 题目链接: ...

  10. 【计算机图形学】openGL常用函数

    OpenGL常用函数   glAccum 操作累加缓冲区   glAddSwapHintRectWIN 定义一组被 SwapBuffers拷贝的三角形   glAlphaFunc允许设置alpha检测 ...