简介内容超出部分文字隐藏省略的特效(可显示)

我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。我是那传说中很长很长一段的文字，作者hutia。

(function(){
var o = document.getElementById("hutia");
var s = o.innerHTML;
var p = document.createElement("span");
var n = document.createElement("a");
p.innerHTML = s.substring(0,100);
n.innerHTML = s.length > 100 ? "..." : "";
n.href = "###";
n.onclick = function(){
if (n.innerHTML == "..."){
n.innerHTML = "收起";
p.innerHTML = s;
}else{
n.innerHTML = "...";
p.innerHTML = s.substring(0,100);
}
}
o.innerHTML = "";
o.appendChild(p);
o.appendChild(n);
})();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js实现图片显示局部，鼠标经过显示全部的效果

    js实现图片显示局部，鼠标经过显示全部的效果

    这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果.图片开始只是局部的,鼠标放上去显示整个图片. 无标题文档 body{ font-size:12px; } ul,li,ol{ margin:0; padding:0; list-style:none; } .box{ margin:100px; clear:both; border:1px solid #000; } .box ul li{ list-style:none; float:left; width:60px; he

  • 下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能

    下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能

    Cerberus FTP Server 是一个 FTP 服务器软件,它在为用户提供专业级别的安全 SSL/TLS 加密标准和强大的 FTP 服务器性能的同时还保持了简单易用的特点.软件占用 CPU 和内存很少,拥有友好的用户界面,可以通过系统托盘图标快速访问.程序支持多网卡环境,支持与系统用户帐号集成以及活动目录,支持续传,用户权限控制,连接数限制,超时设置,IP 地址自动阻止和黑名单等多种功能,支持安装为系统服务以实现无需登录系统即可提供服务:提供实时监视功能,可实时查看用户操作状态或断开.阻

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

  • 简介内容超出部分文字隐藏省略的特效(可显示)

    我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长

  • JavaScript实现隐藏省略文字效果的方法

    JavaScript实现隐藏省略文字效果的方法

    本文实例讲述了JavaScript实现隐藏省略文字效果的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>JS</title> </head> <body> <div id="content&qu

  • Android实现在TextView文字过长时省略部分或滚动显示的方法

    本文实例讲述了Android实现在TextView文字过长时省略部分或滚动显示的方法.分享给大家供大家参考,具体如下: TextView中有个ellipsize属性,作用是当文字过长时,该控件该如何显示,解释如下: 1.android:ellipsize="start"-–省略号显示在开头 2.android:ellipsize="end"--省略号显示在结尾 3.android:ellipsize="middle"--省略号显示在中间 4.an

  • 使Java的JButton文字隐藏功能的实现(不隐藏按钮的前提)

    使Java的JButton文字隐藏功能的实现(不隐藏按钮的前提)

    在网上虽然看到了方法,但是处理感觉很复杂,我的办法,老实说,是突然试一下试到的,哈哈QWQ OK,开始说明如何整的. 效果如上图所示 代码如下 package csdn.article; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class JButtonTextSize extends JFram

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

  • JS实现隐藏同级元素后只显示JS文件内容的方法

    JS实现隐藏同级元素后只显示JS文件内容的方法

    本文实例讲述了JS实现隐藏同级元素后只显示JS文件内容的方法.分享给大家供大家参考,具体如下: 这里的demo.html文件在打开后会短暂显示与js文件同级的元素后马上隐藏这些元素,并显示同级的demo.js文件内容.具体代码如下: demo.html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title><

  • 使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

    具体代码如下所示: <template> <div> <table> <tr v-for="item in tableData" :value="item.value" :key="item"> <td> <div> <template> {{item.id}} </template> </div> </td> <td&g

  • Vue替代marquee标签超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marquee from 'marquee-components' Vue.use(marquee ); 在页面使用 <template> <div id="app"> <marquee :val="msg"></marquee>

  • jquery淡化版banner异步图片文字效果切换图片特效

    复制代码 代码如下: <pre code_snippet_id="280064" snippet_file_name="blog_20140408_1_8982765" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • angularjs实现文字上下无缝滚动特效代码

    angularjs实现文字上下无缝滚动特效代码

    最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}

随机推荐