欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

文本超出显示省略号

程序员文章站 2022-04-22 14:02:42
...

前言:

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>
最后:本人新手小白,有什么错误的地方,请大家帮忙指出,虚心向各位大佬学习。