有时候，页面并不需要展示全部信息。或者展示全部信息会影响页面布局的时候，就需要将多余信息显示成省略号，主要css代码就四句：定宽、不换行、超出隐藏、显示省略号
- width：1111px;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis
//demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one li{
list-style: none;
width: 220px; /*定宽*/
white-space: nowrap; /*不换行*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*显示省略号*/
}
</style>
</head>
<body>
<ul class="one">
<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
</ul>
</body>
</html>