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

CSS实现限制显示的字数，超出显示"..."

2016-05-14 13:47 627 查看

一、背景

　　在实际项目中，我们常常需要对某些页面的某些特定区域显示指定数量的内容，超出的内容显示"..."来进行美化页面，那么应该怎么做呢？今天就让我们来看看如何达到这一效果。

二、实现步骤

　　CSS代码

.ov{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

这样我们就实现了这一效果，但是限制条件是：所要显示的内容只能在一行，不能有换行出现，否则不起作用。

测试代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试超出显示点点点</title>
<style type="text/css">
.ov{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:200px;
margin:30px auto;
}
</style>
</head>
<body>
<div class="ov">
测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点
</div>
</body>
</html>

显示效果如下：

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

标签：

相关文章推荐

新的分享

章节导航