场景：
在实际的项目开发个过程中，有时候文本内容不能全部显示出来，会影响到页面的排版布局，这时就需要我们对文字做一个溢出处理。
效果如下：
代码如下：
/* 单行文字溢出显示省略号 */
.ellipsis_one{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 两行文字溢出显示省略号 */
.wrap_more_two{
overflow: hidden;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 2;
}
/* 三行文字溢出显示省略号 */
.wrap_more_three{
overflow: hidden;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 3;
}示例页面 HTML：
<body>
<ul>
<li><h4>单行文字溢出处理</h4>
<p class="ellipsis_one">今天天气很好呀，而且马上就要过年啦，开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</li>
<li><h4>多行文字溢出处理之 两行文字溢出</h4>
<p class="wrap_more_two">今天天气很好呀，而且马上就要过年啦，开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
<li><h4>多行文字溢出处理之 三行文字溢出</h4>
<p class="wrap_more_three">今天天气很好呀，而且马上就要过年啦，开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
</ul>
</body>以上就可以满足现今项目中的全部需求，希望可以帮到你。
