HTML单行与多行文本超出省略显示

标签：box 省略 单行 HTML webkit overflow 文本

1、单行文本省略显示

1  p{
2             width: 300px;
3             height: 30px;
4             line-height: 30px;
5             border: 2px solid red;

　　　　　　　　　　/* 禁止文本换行 */            　　　white-space:nowrap;            　　  /* 文本溢出的部分隐藏 */             　　 overflow: hidden;                 /* 文本溢出的部分用省略号表示 */                 text-overflow: ellipsis;

9     }

 

 2、多行文本省略显示

1             overflow: hidden;
2             text-overflow: ellipsis;
3             /* 设置为弹性盒子 */
4             display: -webkit-box;
5             /* 最多显示四行 */
6             -webkit-line-clamp:4;
7             /* 弹性盒子的子元素排列方式 */
8             -webkit-box-orient: vertical;
9             /* -webkit-box-orient: horizontal; */

 

标签：box,省略,单行,HTML,webkit,overflow,文本
From： https://www.cnblogs.com/wanganli/p/17234868.html