div中的内容溢出后以省略号结尾

最新推荐文章于 2020-09-18 17:05:17 发布

长江之友

最新推荐文章于 2020-09-18 17:05:17 发布

阅读量1.4k

点赞数

分类专栏： Web前端文章标签： div溢出省略号限制div中的字数

本文链接：https://blog.csdn.net/changjiangbuxi/article/details/16922775

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍两种实现网页元素内容截断的方法：一是通过JavaScript动态调整文本显示长度，并使用特殊字符计数来确保准确截断；二是利用HTML和JavaScript结合，对表格中的单元格内容进行长度限制。

摘要由CSDN通过智能技术生成

方法一

样式：

html代码

<div id="intro_info" class="right_right_bottom_middle_bottom_top">
	 							
</div>
<div class="right_right_bottom_middle_bottom_bottom">
	<a href="__URL__/com_intro_content?menu_id=10" target="_blank" style="color:#434343;text-decoration:none">更多 >></a>
</div>

<input type="hidden" id="text" value='{$text}' >

js代码

    //企业简介上的字符串截取
		splitString($("#text").val());
		//字符串截取
		function splitString( str ){   
		    var sub_length = 130 ;   
		    var all_str = str.replace(/[^\x00-\xff]/g,"**");//精髓   
		    var new_str = all_str.substring(0,sub_length);  
		    var end; 
		    //找出有多少个*   
		    var x_length = new_str.split("\*").length - 1 ;   
		    var hanzi_num = x_length /2 ;   
		    sub_length = sub_length - hanzi_num ;//实际需要sub的长度是总长度-汉字长度   
		    var res = str.substring(0,sub_length);   
		    if(sub_length < str.length ){   
		        end  = res + "……</p>"; 
		    }else{    
		        end  = res +"</p>";   
		    }   
		   $("#intro_info").html(end);
		}

方法二

html代码：

<tr class="tr" id="{$vo.news_id}">		
						<td>
							<input type="hidden" value="{$vo.news_id}">
							<input name="check" type="checkbox">
						</td>
						<td valign="middle">{++$n}</td>
						<td class="title" title="{$vo.title}">{$vo.title}</td>
						<td>{$vo.create_time||date="Y-m-d H:i:s",###}</td>
						<td>{$vo.page_view}</td>
						<td>
							<a href="__APP__/View/View/news_content?news_type={$vo.news_type}&news_id={$vo.news_id}" target="_blank" style="margin-left:0px">预览</a>
							<a href="__URL__/news_edit?news_id={$vo.news_id}&is_pic={$vo.is_pic}" style="margin-left:10px">编辑</a>
							<a href="javascript:void(0)" class='del' style="margin-left:10px">删除</a>
						</td>		 
				</tr>

js代码：

/*限制表格中标题中显示的字数*/
	for(var i=0;i<$('.tr').length;i++){
		var title = $('.title').eq(i).html();
		if(title.length>20){
			var title1=title.substring(1, 20);
			$('.title').eq(i).html(title1+"...");
		}	
	}