<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bg{
width: 400px;
border:1px solid red;
/*这三条是捆绑的 分开就实现不了*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*
* 包含文字的容器不能靠内容撑开
* 可以设置的值
* ellipsis 出现省略号
* clip 溢出内容直接剪掉
*/
}
</style>
</head>
<body>
<div id="bg">
溢出显示省略号溢出显示省略号溢出显示省略号溢出显示省略号
</div>
</body>
</html>
显示效果: