/背景知识/

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置，从零开始的索引

参数描述

start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。

如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。

如果 start 或 end 为负数，那么它将被替换为 0

/实际应用：截取字符串多出来并用省略号[...]显示/

在线演示：http://codepen.io/anon/pen/yNXyMX

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>js 截取字符串多出来并用省略号...显示</title>

	<style type="text/css">

	.content{

		width: 200px;

	        margin: 100px auto;

		padding: 15px;

		background-color: orange;

		color: #fff;

	}

	.btn {

	  float: right;

	  background-color: #fff;

	  color: #333;

	  font-size: 12px;

	  padding: 4px 8px;

	  border-radius: 3px;

	  margin-top: 5px;

	  text-shadow: 0 0 1px rgba(0,0,0,.25);

	  box-shadow: 0 0 1px rgba(0,0,0,.25);

     }

.move{

	 -webkit-transition:all ease-in-out .35s;

	 transition:all ease-in-out .35s;

	 -webkit-animation:showIn 1.4s cubic-bezier(0, 0, 0.2, 1);

         animation:showIn 1.4s cubic-bezier(0, 0, 0.2, 1);

         -webkit-animation-fill-mode: backwards;

         -moz-animation-fill-mode: backwards;

         -o-animation-fill-mode: backwards;

          animation-fill-mode: backwards;

     }

@keyframes showIn{

    0%{ opacity: .5;}

    60%{transform: scale(1.2);}

    100% { -o-transform: scale(1.0);opacity: 1.0;}

    }

@-webkit-keyframes showIn{

    0%{ opacity: .5;height: 20%;}

    60%{-webkit-transform: scale(1.2);}

    100% { -webkit-transform: scale(1.0);opacity: 1.0;}

   }

	</style>

</head>

<body>

<div class="content">

 <span>

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置，从零开始的索引

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。

如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。

如果 start 或 end 为负数，那么它将被替换为 0

</span><span class="btn">收缩</span>

</div>

<script type="text/javascript">

	var oDiv=document.getElementsByTagName('div')[0];

	var arr_span=document.getElementsByTagName('span');

        var str=arr_span[0].innerHTML;

	var onOff=true;

       arr_span[1].onclick=function(){

    	if(onOff){

        arr_span[0].innerHTML=str.substring(0,43)+'...';

    	arr_span[1].innerHTML='展开';

    	oDiv.classList.add('move');

    	onOff=false;

    	}else{

    	arr_span[0].innerHTML=str;

    	arr_span[1].innerHTML='收缩';

    	oDiv.classList.remove('move');

    	onOff=true;

    	}

    }

</script>

</body>

</html>

　　

Javascript: 截取字符串多出来并用省略号[...]显示的更多相关文章

  1. javascript截取字符串(支持中英文混合)

    javascript截取字符串(支持中英文混合) <script type="text/javascript"> var sub=function(str,n){ va ...

  2. Js自动截取字符串长度，添加省略号“……”

    JavaScript字符串处理函数,根据定义的长度截取字符串,超出部分裁掉追加……,很多时候网页上显示的内容需要缩成“...”该方法用于处理字符串显示固定长度,超长部分用“...”代替: /**参数说 ...

  3. javascript截取字符串的最后几个字符

    在JavaScript中截取字符串一般是使用内置的substring()方法和substr()方法,这两个方法功能都很强大,也都能实现截取字符串中的最后几个字符. substring()方法 Java ...

  4. CSS截取字符串，额外的文本显示以省略号

    最近的诀窍css还有这么叼炸天的侧~~~ 善待似论坛页面,头像70px,但username不限啊,English中国能够.你说如果他采取"我的名字是这么长啊.你该怎么办呢".那老和 ...

  5. 算法:javascript截取字符串

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  6. javascript截取字符串长度

    <html> <head> <meta charset="UTF-8"/> <title>截取字串长度</title> ...

  7. eshop截取字符串长度 和去掉省略号

    <!-- {if $goods.goods_brief} --> {$goods.goods_brief|truncate:17}<!-- {/if} --> 去掉省略号: 找 ...

  8. JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用

    //截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...

  9. vue 引用公共方法（例子：截取字符串固定字数，其余显示...）

    1.写公共js 2.main.js引入公共js 3.在组件中用this.common.方法名 引用

随机推荐

  1. JAVA基础1

    阶段0:拟出一个计划 阶段1:要制作什么? 阶段2:如何构建? 阶段3:开始创建 阶段4:校订 阶段5:计划的回报   一.程序运行时,数据保存位置 1.寄存器.这是最快的保存区域,因为它位于和其他所 ...

  2. android中正确保存view的状态

    英文原文: http://trickyandroid.com/saving-android-view-state-correctly/ 转载此译文须注明出处. 今天我们聊一聊安卓中保存和恢复view状 ...

  3. C语言之可重入函数 && 不可重入函数

    可重入函数 在 实时系统的设计中,经常会出现多个任务调用同一个函数的情况.如果这个函数不幸被设计成为不可重入的函数的话,那么不同任务调用这个函数时可能修改其他任 务调用这个函数的数据,从而导致不可预料 ...

  4. RedHat下GCC及G++的安装

    GCC的安装: 切换到安装光盘目录下: #mount /dev/cdrom    /mnt/cdrom #cd /mnt/cdrom 安装GCC依赖的*rpm程序,必须按照顺序依次执行: #rpm - ...

  5. UltraEdit环境下，php简单环境配置

    1.语法高亮 菜单->视图->查看方式->选中“PHP” 2.自动补全 菜单->高级->配置->自动完成->选中“自动显示自动完成对话框”,字符数选择2-3为 ...

  6. LinkButton( 按钮)

    一． 加载方式 //class 加载方式<a href="###" class="easyui-linkbutton">按钮</a> / ...

  7. 来自GitHub的Android UI开源项目

    最近在搞Android开发,做了一个项目后感觉,Android开发入门很是简单,但要能做出用户体验比较完美的APP实在是一件很不容易的事情!要达到一定的水准,估计还需要慢慢的积累,这里先保存一个Git ...

  8. static静态类与非静态类的区别

    static静态类与非静态类的区别 1.在非静态类中可以有实例成员也可以有静态成员 2.在调用的时候需要使用对像名.实例成员调用(先要实例化,如person ps=new person();  ps. ...

  9. poj3071

    题目大意,1<<n个球队比赛赛程是这样的 1 1    1 1   1 1  1 另dp[i][k]为k队进入第i场的概率 #include<iostream> #includ ...

  10. destoon实现调用热门关键字的方法

    本文所述的destoon调用热门关键字的方法是根据数据库里面的保存的搜索的关键字来显示的.每个模块下面都有各自的关键字下面是调用的标签: ? 1 <!--{tag("moduleid= ...