前提：显示区域显示不下（设置宽高）
HTML：
<div class="single-line">I believe that as a Chinese, one should have a strong sense of honor, pride, and a sense of responsibilityto study for the rise of China. Those who violate China will be punished even if they are far away.</div>
CSS：单行文本溢出显示省略号
.single-line {width: 200px; height: 30px;line-height: 30px;white-space: nowrap; /*不换行*/overflow: hidden; //溢出隐藏text-overflow: ellipsis; /*文本溢出处理方式:省略号*/border: 1px solid red;}
CSS: 多行文本溢出显示省略号
.mutli-line {width: 200px;height: 150px;line-height: 30px;overflow: hidden;display: -webkit-box;/*改变盒子的显示类型(官方没有标准,但是在webkit的浏览器内核中可以做到) */-webkit-line-clamp: 5;/*要显示的行数 */-webkit-box-orient: vertical;/*文本排列的反向,竖直排列 */border: 1px solid red;}
