单行文本样式代码：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本样式代码：

width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

示例html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		 	.single-line{
		 	     overflow: hidden;
		 	     text-overflow: ellipsis;
		 	     white-space: nowrap;
		 	}
 		 	.multiple-line{
		 	     width: 400px;
		 	     display: -webkit-box;
		 	     -webkit-line-clamp: 3;
		 	     -webkit-box-orient: vertical;
		 	     overflow: hidden;
		 	}
		</style>
	</head>
	<body>
		<p class="single-line text-right">这是一段单行文本，用来演示css控制文本超出长度隐藏并用三个点结尾，这段示例代码由零五网[https:www.02405.com]提供。这是一段单行文本，用来演示css控制文本超出长度隐藏并用三个点结尾，这段示例代码由零五网[https:www.02405.com]提供。这是一段单行文本，用来演示css控制文本超出长度隐藏并用三个点结尾，这段示例代码由零五网[https:www.02405.com]提供。</p>
		<p class="multiple-line">这是一段多行文本，用来演示css控制文本超出长度隐藏并用三个点结尾，这段示例代码由零五网[https:www.02405.com]提供。这是一段多行文本，用来演示css控制文本超出长度隐藏并用三个点结尾，这段示例代码由零五网[https:www.02405.com]提供。这是一段多行文本，用来演示css控制文本超出长度隐藏并用三个点结尾，这段示例代码由零五网[https:www.02405.com]提供。</p>
	</body>
</html>

示例效果：

(adsbygoogle = window.adsbygoogle || []).push({});