请看下面的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; } 结果就是这样的