//单行文本溢出
.one{
width: 200px;
border: 1px solid #000;
overflow: hidden; //溢出文本隐藏
text-overflow: ellipsis; //溢出文本显示省略号
white-space: nowrap; //强制不换行
}
// 多行溢出 只能在手机端使用 在PC端使用会有兼容
<p class="one">
我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
</p>
.two{
width: 200px;
border: 1px solid #000;
display: -webkit-box; //必须的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 5; // 设定在哪一行显示省略号
-webkit-box-orient: vertical; //必须的属性 ，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden; //溢出文本隐藏
text-overflow: ellipsis; //溢出文本显示省略号
}
<p class="two">
我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字
</p>
