当一个元素的空间有限装不下文字(溢出)的时候该怎么办呢？

是隐藏呢是显示省略号呢，css text-overflow 可以解决这样的问题，它是css3的属性。

此属性不能单独工作。我们必须使用 white-space: nowrap;和overflow: hidden;同时使用。

语法

text-overflow: clip | ellipsis | string ;
  • clip： 它为默认值。截断超出的文本内容，即超出不显示。
  • ellipsis：以省略号显示多出的文本。它显示在区域内，但是会减少文本量。
  • string： 使用给定的自定义字符串向用户表示超出的文本。它仅适用于 Firefox 浏览器。

例子

 <html>

<head>
<title>
CSS text-overflow 属性
</title>
<style>
div {
	width: 210px;
	font-size: 16px;
	border:2px solid red;
}
	p{
	  white-space:nowrap;/*必须搭配使用*/
	  overflow:hidden;/*必须搭配使用*/
	}
	.p1{
		text-overflow:clip;
	}
	.p2{
		text-overflow:ellipsis;
	}
	.p3{
		text-overflow:'yxjc123.com';/*仅用于火狐浏览器*/
	}
</style>
</head>

<body>
<h3 style="color:red;">yxjc123.com CSS text-overflow 属性</h3>
<div>
<p class="p1">第1种，默认的显示方式clip，看是什么效果呢</p>
<p class="p2">第2种，显示方式ellipsis，看是什么效果呢</p>
<p class="p3">第3种，显示方式string，看是什么效果呢</p>

</div>
</body>

</html>

为了能看到所有的效果，在火狐浏览器运行如下：

css text-overflow 文字溢出处理

可以给它加一些动态的效果，鼠标放上去的时候全部显示。

 <html>

<head>
<title>
CSS text-overflow 属性
</title>
<style>
div {
	width: 210px;
	font-size: 16px;
	border:2px solid red;
}
	p{
	  white-space:nowrap;/*必须搭配使用*/
	  overflow:hidden;/*必须搭配使用*/
	}
	.p1{
		text-overflow:clip;
	}
	.p2{
		text-overflow:ellipsis;
	}
	.p3{
		text-overflow:'1111111111';
	}
	p:hover{
		overflow: visible;
	}

</style>
</head>

<body>
<h3 style="color:red;">yxjc123.com CSS text-overflow 属性</h3>
<div>
<p class="p1">第1种，默认的显示方式clip，看是什么效果呢</p>
<p class="p2">第2种，默认的显示方式ellipsis，看是什么效果呢</p>
<p class="p3">第3种，默认的显示方式string，看是什么效果呢</p>

</div>
</body>

</html>
css text-overflow 文字溢出处理