小效果--多行文本溢出出现省略号

实现多行文本溢出溢出省略号

最近遇到一个小效果，多行文本溢出时候出现'...'省略号。实现的方法有两种：

webkit内核的浏览器本身支持的css指令。
兼容性更好的辅助元素实现。

法一：webkit内核css实现

我们只需要加上以下几行css即可:

css 复制代码

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

这个方法简单高效，你要非说兼容性多差也不至于，顶多在不是webkit内核的浏览器不出现...，但依旧会隐藏超出的内容。放心用!

追求完美的请看下一种方法。

法二：伪元素辅助实现

我们先看思路:

需要利用两个辅助元素: 1.一个专门放...的div 2.一个元素将文本顶下去。
将...元素右浮动，此时元素会被文字环绕，这个时候就想办法将...给放置到最下方如果单独使用margin-top，那么文字会避开...的maigin，所以设置给'...'设置margin-top无效。
这个时候就需要做出来一个伪元素，将我们的整个文本顶下去，然后再设置文本的margin-top为负值，调到正确的位置即可。

html结构

html 复制代码

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        	.box{
                        width:200px;
                        height: 104px;
			background-color: skyblue;
			margin: 200px auto;
			padding: 10px;
			overflow: hidden;  /* 记得溢出隐藏*/
		}
      </style>
    </head>
    
<body>
		<div class="box">
		    <div class="txt">来一点中文的多行文本溢出处理手机号介绍的就哈市换手机号加时间到货时间黄金时代回到家撒活动结合实际电话实践活动久啊圣诞节函数换手机号圣诞节啊</span>
		</div>
</body>
        
<html>

看下效果：

接下来我们一点点实现：

我们需要加一个元素专门放'...'，然后给它浮动到右侧。

html 复制代码

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        	.box{
                  width:200px;
                  height: 104px;
			background-color: skyblue;
			margin: 200px auto;
			padding: 10px;
			overflow: hidden;  /* 记得溢出隐藏*/
		}
                
          /* 省略元素 */
		.more{
                    float: right;/* 主要是使用浮动，让文字环绕 */
                    margin-right: 5px;
		}
      </style>
    </head>
    
<body>
		<div class="box">
                    <div class="more">...</div>
		    <div class="txt">来一点中文的多行文本溢出处理手机号介绍的就哈市换手机号加时间到货时间黄金时代回到家撒活动结合实际电话实践活动久啊圣诞节函数换手机号圣诞节啊</span>
		</div>
</body>
        
<html>

现在效果是这样的:

我们只需要想办法将...给去往下方即可，可以使用一个伪元素，将内容顶下去，然后再调整文本margin-top为负数

最终代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.box{
				width:200px;
				height: 104px;
				background-color: skyblue;
				margin: 200px auto;
				padding: 10px;
				overflow: hidden;  /* 记得溢出隐藏*/
			}
			
			.box .txt{
				margin-top: -20px;
			} 
			
			
			
			/* 辅助伪元素 */
			.box::before{
				content: "";
				display: block;
				height: 90px;
			}
			
			/* 省略元素 */
			.more{
				float: right;/* 主要是使用浮动，让文字环绕 */
				margin-right: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="more">...</div>
			<div class="txt">来一点中文的多行文本溢出处理手机号介绍的就哈市换手机号加时间到货时间黄金时代回到家撒活动结合实际电话实践活动久啊圣诞节函数换手机号圣诞节啊</span>
		</div>
	</body>
</html>

再看下效果：

朋友，我是喝西瓜汁的兔叽，感谢您的阅读，衷心祝福您和家人身体健康，事事顺心。