html中关于文本溢出问题的解决方案

闲来无事，整理一下文本溢出问题的解决方法。对您有帮助就当互相学习，您有更好的方法也可以相互交流，共同提升。

在前端读取并显示数据时，经常会遇到文本长度超出容器容量的问题，这种情况被称为文本溢出，在这种情况下我们需要对文本进行处理，此次我们从多个角度对单行和多行的文本溢出问题进行处理。

单行文本溢出处理

单行文本的处理十分简单。通过css样式即可实现。
在容器中直接加入如下代码

<style>
	.cell{
		overflow: hidden; // 超出部分隐藏
		white-space: nowrap; // 禁止文本换行
		text-overflow: ellipsis; // 溢出部分显示省略号
		width: 300px;
		background: #fff;
		border: 1px solid red;
	}
</style>
<div class="cell">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>

结果如下：

多行文本溢出处理

多行文本的处理有以下几种方法

方法一

使用css

<style>
	.cell{
		overflow: hidden;
		display: -webkit-box;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		border: 1px solid red;
		background-color: #fff;
		width: 300px;
		height: 72px;
		font-size: 16px;
		line-height: 24px;
	}
</style>
<div class="cell">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>

结果如下（webkit内核浏览器）：

注意：该方法有一定的局限性，只适用于webkit内核的浏览器和手机端的大部分浏览器，不适用于火狐浏览器等不是webkit内核的浏览器。火狐浏览器结果如下：

方法二

由于方法一有一定的局限性，所以有了此解决方法
此方法跨浏览器兼容，是通过绝对定位一个“…”的方法来实现

<style>
	.cell{		
		overflow: hidden;
		position: relative;
		height: 72px;
		font-size: 16px;
		line-height: 24px;
		width: 400px;
		border: 1px solid red;
		background-color: #fff;
	}
	.cell::after{
		position: absolute;
		bottom: 0;
		right: 0;
		width: 20px;
		height: 24px;
		content: "...";
		background: #fff;
	}
</style>
<div class="cell">
	<span>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</span>
</div>

注意：外部容器的高度一定要为行高的整数倍
结果如下：

此方法可以解决绝大多数情况的文本溢出问题，但是最后的省略号因为是定位到此处的，所以难免会出现将文字遮挡一半的情况，为了解决这种突兀的现象，可以通过css改变背景渐变色或者直接添加背景图片的方法解决，此处我选择采用添加背景图片的方法。

<style>
	.cell{		
		overflow: hidden;
		position: relative;
		height: 72px;
		font-size: 16px;
		line-height: 24px;
		width: 400px;
		border: 1px solid red;
		background-color: #fff;
	}
	.cell::after{
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 0 0 0 40px;
		width: 20px;
		height: 24px;
		content: "...";
		background: url(ellipsis_bg.png) no-repeat;
	}
</style>
<div class="cell">
	<span>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</span>
</div>

结果如下：

这样进行处理之后，就不会显得那么突兀。

注意：此方法虽然可行，但是还是有一定的缺陷：因为省略号是绝对定位到最后的，当容器内的文本没有溢出时，省略号依旧会出现在最后，如下如所示

所以，我们需要想办法将省略号遮挡住，可以用以下方法解决：

方法三

此方法为方法二的升级版，更加完善，原理如图：

1. 后面跟随的容器，必须为行内块元素，这样不仅能跟随在文本后面，通过文本的挤压来调整容器的位置，以起到遮挡的作用；同时还可以对元素的长度和大小进行设置，防止文本在刚好一行结束的地方停止，若容器没有宽度，则此时不会起到遮挡的效果。
2. 跟随容器的大小必须大于外部容器的大小，防止出现遮挡不住的情况。
3. 因为基准线的问题，尽量添加方法使基准线对齐。
4. 因为跟随容器大小、元素层次等问题，所以我采用跟随容器内添加before伪元素的方法进行实现。具体实现方法如下：

<style>
	.cell{		
		overflow: hidden;
		position: relative;
		height: 72px;
		font-size: 16px;
		line-height: 24px;
		width: 400px;
		border: 1px solid red;
		background-color: #fff;
	}
	.cell::after{
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 0 0 0 40px;
		width: 20px;
		height: 24px;
		content: "...";
		background: url(ellipsis_bg.png) no-repeat;
	}
	.cell-baffle{
		position: relative;
		display: inline-block;
		width: 30px;
		height: 24px;
		vertical-align: middle;
	}
	.cell-baffle::before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 1000px;
		height: 100px;
		background: #fff;
	}
</style>
<div class="cell">
	<span>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</span>
	<span class="cell-baffle"></span>
</div>

结果如下：

文本未溢出情况：

文本溢出情况：

方法四

使用js直接截取的方法（最简单也是最麻烦的js方法）

//字数截取
$(function(){
  	$(".main-news").find(".content").each(function(){
	   	var maxlength = 0;
	    var span = $(this).find(".detail").children("span");
	    var spanTxt = span.html();
	    if(document.body.clientWidth >= 1181){
			maxlength = 88;
	    } else if(document.body.clientWidth >= 974 && document.body.clientWidth < 1181) {
			maxlength = 170;
		} else if(document.body.clientWidth >= 753 && document.body.clientWidth < 974) {
			maxlength = 120;
	    } else {
	    	maxlength = 50;
	    }
	    if(spanTxt.length > maxlength){
	  	  	span.html(spanTxt.substring(0, maxlength)+ '...')
	    } else {
	  	  	span.html(spanTxt)
	    }
	        
	    // 随屏幕变化截取
	    $(window).resize(function(){   
			if(document.body.clientWidth >= 1181){
				maxlength = 88;
	        } else if(document.body.clientWidth >= 974 && document.body.clientWidth < 1181) {
	    		maxlength = 170;
	        } else if(document.body.clientWidth >= 753 && document.body.clientWidth < 974) {
	       	  	maxlength = 120;
	      	} else {
	     		maxlength = 50;
	      	}
	     	if(spanTxt.length > maxlength){
	   	  		span.html(spanTxt.substring(0, maxlength)+ '...')
	     	} else {
	   	  		span.html(spanTxt)
	     	}
		});
  	});
});  

此方法是最简单也是最麻烦的方法，优点就是可以自己选择截取的字数限制，缺点是不一定截取到哪，而且需要不断尝试合适范围。

更多的js方法可以自行查找。

如果我的方法有问题或者缺陷可以给我提出，大家相互交流。