单行、多行文本溢出以省略号显示

//单行文本溢出

.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>

 

转载于:https://www.cnblogs.com/lzfj/p/11463333.html