js小例子（多字溢出，省略号表示）
实现了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小例子（多字溢出，省略号表示）的更多相关文章
- js小例子（标签页）
运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...
- js小例子（简单模糊匹配输入信息）
该例子实现的是用户输入信息或者字母时可以搜索出来,鼠标点击选择 <!DOCTYPE html> <html> <style> p{ width:200px; hei ...
- js小例子之二级联动
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
- JS操作Cookies的小例子
这篇文章介绍了JS操作Cookies的小例子,有需要的朋友可以参考一下. 您可能感兴趣的文章:js 保存与获取cookie的代码javascript cookie操作实例详解javascript co ...
- Vue.js的小例子--随便写的
1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...
- js 回调函数小例子
js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...
- JS模拟键盘事件 -- 原理及小例子
提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...
- JS的for循环小例子
1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...
随机推荐
- 好用的php类库和方法
1, /** * 将一个平面的二维数组按照指定的字段转换为树状结构 * * 用法: * @code php * $rows = array( * array('id' => 1, 'value' ...
- 在springMVC的controller层获取view层的参数的方式
方法一:request.getParameter("name") 方法二:注解@RequestParam @RequestMapping("testRequestPara ...
- css+html 关于文本的总结（整理中）
布局1:固定行数 <div> <p>示例文字示例文字示例文字示例文字</p> </div> <!-- CSS代码 --> div{ widt ...
- Redis内存管理（一）
Redis数据库的内存管理函数有关的文件为:zmalloc.h和zmalloc.c. Redis作者在编写内存管理模块时考虑到了查看系统内是否安装了TCMalloc或者Jemalloc模块,这两个是已 ...
- MAC下GitHub命令操作
由于GitHub实在太有用了~~ ,各种源代码,开源工程,经常需要下载下来使用和学习,或者自己的代码需要上传之类的,尽管有"GitHub for Mac"工具,但是作为一名程序猿! ...
- python基础——返回函数
python基础——返回函数 函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_ ...
- Jmeter测试JDBC
Datebase Driver class Database URL MySQL com.mysql.jdbc.Driver jdbc:mysql://host:port/{dbname} Postg ...
- sp_who使用
[SQL Server] sp_who, sp_who2和sp_who3 sp_who可以返回如下信息: (可选参数LoginName, 或active代表活动会话数)Spid (系 ...
- SQLServer操作结果集
union组合结果集 --相同合并 union --全部显示 union all 公用表表达式 with CET( wName,dName) as ( select wName,dName from ...
- Ubuntu下安装Python3.4
转自:http://blog.sina.com.cn/s/blog_7cdaf8b60102vf2b.html 1. 通过命令行安装Python3.4,执行命令:sudo apt-get instal ...