CSS处理单行文本溢出和多行文本溢出显示省略号

前提：显示区域显示不下（设置宽高）

HTML：

<div class="single-line">
			I believe that as a Chinese, one should have a strong sense of honor, pride, and a sense of responsibility
			to 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;
    }