文本超出顯示省略號

前言：

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>

最後：本人新手小白，有什麼錯誤的地方，請大家幫忙指出，虛心向各位大佬學習。