实现了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. bootstrap清除拟态框内添加新HTML再打开时会有缓存现象

    $(function(){ $("#editor").on("hidden.bs.modal",function(){ //清除缓存方法 $(this).fin ...

  2. google关于ssh key的解释（转）转的google的wiki的

    SSH keys (简体中文)     SSH 密钥对可以让您方便的登录到 SSH 服务器,而无需输入密码.由于您无需发送您的密码到网络中,SSH 密钥对被认为是更加安全的方式.再加上使用密码短语 ( ...

  3. 解决eclipse Maven 主项目不能刷新maven

    项目->.project -> 增加<?xml version="1.0" encoding="UTF-8"?><projectD ...

  4. IT人学习方法论（三）：高效学习

    一些有关“怎么学”的建议 首先需要明确方向,否则即使学习方法再高效,也不免南辕北辙,背离自己的目标.关于学习方向的讨论,请参见之前的一篇文章 .下面我来重点说一说有关“怎么学”的建议. IT技术,不是 ...

  5. IOS常用正则表达式

    IOS常用正则表达式 正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是 ...

  6. sql server 用户'sa'登录失败（错误18456）（转载）

    转载地址:http://thenear.blog.51cto.com/4686262/865544 用户'sa'登录失败(错误18456)解决方案图解 当我们在使用sql server 的时候可能会遇 ...

  7. Yii 同域名的单点登录 SSO实现

    SSO (Single Sign-on) 顾名思义就是几个子项目共用一个登录点. 原理简单来说就是服务端session 共享, 客户端跨域cookies. 实现非常简单,protected/confi ...

  8. 最终排名 sdut 2446

    最终排名 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...

  9. Ext.MessageBox消息框

    Ext JS消息提示框主要包括:alert.confirm.prompt.show 1.Ext.MessageBox.alert() 调用格式: alert( String title, String ...

  10. hdu 1556:Color the ball（第二类树状数组 —— 区间更新，点求和）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...