文本超出显示省略号

前言：

1.因为本人是在bootstrap和jquery下做的，所以用的是jquery 没有使用原生javascript，所以需要进行引包。

2.bootstrap包只是样式效果，对并不会影响功能运行效果，jquery是必须引用的 。

————————————————————————————————————————————

效果图：

——————————————————————————————————————————————

开始撸码：

css样式部分：

<style>
    .inputArea{margin: 20px auto;width: 220px;}
    .inputArea textarea[name=subContent],.inputArea input[name=subLength]{width: 220px;}
    .strSubArea{margin: 20px auto;width: 220px;height: 50px;background: #079ED3;color: #fff;}
    .strSubArea>a{color: #000;text-decoration: underline;}
    .showBtns{margin: 10px auto;width: 220px;display: block;}
</style>

内容部分：

<div class="inputArea">
    <textarea name="subContent" type="text" placeholder="输入要截取的内容...">小莫云联盟（www.925i.cn）</textarea>
    <input name="subLength" type="number" placeholder="输入要截取的内容长度..." value="5"/>
    </div>		
    <div id="strSubArea" class="strSubArea" title="">内容展示区域...</div>
    <div class="btn-group showBtns">
    <button class="btn btn-success showPart">显示部分内容</button>
    <button class="btn btn-success showFull">显示全部内容</button>
</div>

对于以上内容的脚本部分：

<script>
	$(function(){				
		var $strSubArea=$("#strSubArea"); //文本内容容器
		function showPartContent(e,subLength){
			var newStr="";			
			var _subContent=$("textarea[name=subContent]").val().trim(); //内容	
			$(e).attr("title",_subContent);              //赋值给Title
			newStr=_subContent.substring(0,subLength);   //对于内容			
			newStr+="...<a class='showFull'>详情</a>";								
			$(e).html(newStr); //当前调用的元素直接填充
			return newStr;
		}
		function showFullContent(e){
			var fullStr="";
			fullStr=$(e).attr("title");	
			fullStr+="<a class='showPart'>收起</a>";
			$(e).html(fullStr);
			return fullStr;
		}				
		$(document).on("click",".showPart",function(){
			var _subLength=$("input[name=subLength]").val();  //对于内容					
			showPartContent($strSubArea,_subLength);
		})
		$(document).on("click",".showFull",function(){
		showFullContent($strSubArea);
	    })
            $(".showPart").click();
    })			
</script>

实际中可以通用的脚本：

<script>  
        $(function () {
            var $strSubArea = $(".strSubArea");//文本内容容器
            var _subLenght = 12;              //截取的长度
            function showPartContent(e, subLength) {
                var newStr = "";
                var oldStr = $(e).text().trim();
                newStr = oldStr.substring(0, subLength);              
                newStr += "...<a class='showFull'>详情</a>";
                $(e).html(newStr);
            }
            function showFullContent(e) {
                var fullStr = "";
                fullStr = $(e).attr("title");
                fullStr += "<a class='showPart'>收起</a>";
                $(e).html(fullStr);
            }

            $(document).on("click", ".showPart", function () {
                var $span = $(this).parent();
                showPartContent($span, _subLenght);
            })
            $(document).on("click", ".showFull", function () {
                var $span = $(this).parent();
                showFullContent($span);
            })

            //默认显示部分文本内容
            showPartContent($strSubArea, _subLenght);  //执行显示部分文本的方法
        }) 
</script>

最后：本人新手小白，有什么错误的地方，请大家帮忙指出，虚心向各位大佬学习。