1 单行文本溢出
<style>
.demo{
white-space: nowrap; //用来设置元素中的空白如何处理，默认值为normal，即会自动忽略多余的空格和换行符。当设为nowrap时，文本不会换行。
text-overflow: ellipsis; //用来控制溢出文本的显示方式，默认值为clip，即将溢出部分截去。当设置为ellipsis时，会显示省略号。
overflow: hidden; //visible：溢出的内容会显示出来；hidden：溢出的内容会被隐藏；scroll：溢出的内容会显示出来，并且会有滚动条；auto：当溢出的内容超过元素指定的宽度或高度时，会显示滚动条，否则不会显示。
width:10px;
}
</style>
<div class="demo">数据超过固定宽度</div>
2 多行文本溢出
<style>
.demo{
display: -webkit-box; //用来设置容器的display属性为-webkit-box，使其变成一个块级盒子。
-webkit-box-orient: vertical; //用来设置块级盒子的排列方向为垂直方向。
-webkit-line-clamp: 2; //用来限制显示的行数。
text-overflow: ellipsis;
overflow: hidden;
width:10px;
}
</style>
<div class="demo">数据超多固定行数，如果文本过长会出现省略号</div>
3 设置行高和高度实现
<style>
.demo{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 25px;
height: 50px;
}
</style>
<div class="demo">数据超多固定行数，如果文本过长会出现省略号</div>
4 使用伪元素实现
<style>
.demo::before {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 10px;
background: white;
}
.demo{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 25px;
height: 50px;
}
</style>
<div class="demo">数据超多固定行数，如果文本过长会出现省略号</div>
