实现了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. IOS - Foundation和Core Foundation掺杂使用桥接

    Foundation和Core Foundation掺杂使用桥接 Toll-Free Bridging 在cocoa application的应用中,我们有时会使用Core Foundation(CF ...

  2. C#文件夹和文件操作

    File.Exist(string path)//文件读写FileStream fs=new FileStream(filename, FileMode.Create);BinaryWriter bw ...

  3. 如何更改UITextField 的placeholder 的字体颜色

    storyboard 中这样设置 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLa ...

  4. spring整合httpclient

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://w ...

  5. iOS - 开发类库

    开发类库   UI 项目名称 项目信息 1.MJRefresh 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明. ...

  6. 谈谈我的编程之路---WAMP(二)

    WAMP的一些配置与使用心得(MYSQL) 刚开始接触数据库的时候,我一直认为数据库操作工具和数据库是同一种东西,它们是一体的,后来我才明白,数据库它是一个独立的仓库,用官方点的话来解释 数据库(Da ...

  7. iOS源码之OC相册，可以循环查看图片

    #import "ViewController.h" #import "YZUIScrollView.h" #define kuan ([UIScreen ma ...

  8. Spring Boot的快速启动和部署

    >>关于Spring Boot 这是官网描述的特点: 1.Create stand-alone Spring applications 创建独立的Spring应用 2.Embed Tomc ...

  9. HTML5学习之跨文档传输消息（七）

    新标准中提供了文档之间直接的消息传输API.而且不限制跨域消息传递! 发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了,但给哪个window对象发送 ...

  10. babyClock 1.0发布（Android2.2以上）

    [总体说明] babyClock是以天为单位,进行提醒的小工具:可以设置多个闹钟,每个闹钟又按照频率分为多个提醒:过期后自动设置到明天该时刻进行提醒. 一个闹钟包含时间区段.提醒频率:进入时间区段时, ...