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