实现文字自动截断 省略号 使用CSS

来源:互联网 发布:win10动态壁纸软件 编辑:程序博客网 时间:2024/06/05 22:41
.test{ 
width
:200px; 
height
:50px; 
border
:1px solid red; 
padding
:10px; 
overflow
:hidden; /*不显示超过对象宽度的内容*/ 
text-overflow
:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/ 
white-space
:nowrap; /*限制在一行内显示所有文本*/ 
} 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.aspxuexi.com asp学习网</title> 
</head> 
<style type="text/css"> 
div.test
{ 
width
:200px; 
height
:100px; 
border
:1px solid red; 
padding
:10px; 
overflow
:hidden; 
text-overflow
:ellipsis; 
white-space
:nowrap; 
} 

</style> 

<body> 
<div class="test"> 
选来选去最终还是决定去大平坡<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>场地宽,可以游 

</div> 
</body> 
</html> 
 
原创粉丝点击