CSS3属性中的text-overflow:ellipsis详解

语法: text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出

语法:

text-overflow:clipellipsis

默认值为clip 不显示省略标记

clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(...)。

一、常见的单行文本溢出显示省略写法:

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.p{
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-overflow: ellipsis;    /*1*/
			overflow: hidden;           /*2*/
			white-space: nowrap;        /*3*/
  			word-break: break-all;
		}
	</style>
	<body>
		<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
	</body>
</html>

二、多行文本溢出 

WebKit浏览器有一个-webkit-line-clamp的属性,用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号;

display:-webkit-box;

-webkit-line-clamp: 3/*第几行裁剪*/

-webkit-box-orient:vertical;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.p {
			height: 60px;
			line-height: 30px;
			width: 80px;
		    overflow : hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;     /*1*/
		    -webkit-line-clamp: 2;    /*2*//*第几行裁剪*/
		    -webkit-box-orient: vertical;   /*3*/
		} 
	</style>
	<body>
		<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
	</body>
</html>

其它浏览器的话就需要通过js实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		div{
			height: 60px;
		}
		p {
			line-height: 30px;
			width: 80px;
		    margin: 0 auto;
		}
	</style>
	<body>
		<div id="div">
			<p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
		</div>
	</body>
	<script type="text/javascript">
			var eleH = document.getElementById("div").clientHeight;
	        var pEle = document.getElementById("p");
	        while(pEle.clientHeight > eleH) {
	            pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
	        };
	</script>
</html>

到此这篇关于CSS3属性中的text-overflow:ellipsis详解的文章就介绍到这了,更多相关css3 text-overflow:ellipsis属性内容请搜索好代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持好代码网!

您可能有感兴趣的文章
div设置可编辑内容的方法

CSS如何实现不换行/自动换行/超出隐藏显示省略号的方法

CSS如何实现图片变暗的方法

CSS如何实现图片垂直翻转的效果

CSS如何实现修改表格偶数或奇数行的颜色