您的位置：首页 > Web前端 > CSS

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

2008-02-21 11:18 906 查看

.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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