请看下面的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省略号显示</title>
<style type="text/css">
.box{
width: 200px;
height: 20px;
line-height: 20px;
background: blue;
}
</style>
</head>
<body>
<div class="box">一步一步走到天亮的博客，写的简单明了，易懂，当然我有点自恋。</div>
</body>
</html>
页面上的结果是这样的
文字超出了元素，并且自动换行
如果想让元素外面的文字以省略号显示，那么就加上如下代码
.box{
width: 200px;
height: 20px;
line-height: 20px;
background: blue;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
结果就是这样的
超出元素的文字部分，就会以三个省略号的形式显示了
那么文字不换行呢？
只加一个属性即可 ：white-space：nowrap；
.box{
width: 200px;
height: 20px;
line-height: 20px;
background: blue;
white-space: nowrap;
}
结果就是这样的