html如何设置文字超出显示省略号

1、单行文本省略显示

p{
   width: 300px;
   height: 30px;
   line-height: 30px;
   border: 2px solid red;
　 /* 禁止文本换行 */
   white-space:nowrap;
   /* 文本溢出的部分隐藏 */
   overflow: hidden;
   /* 文本溢出的部分用省略号表示 */
   text-overflow: ellipsis;
 }

2、多行文本省略显示

p{
overflow: hidden;
text-overflow: ellipsis;
/* 设置为弹性盒子 */
 display: -webkit-box;
/* 最多显示四行 */
-webkit-line-clamp:4;
/* 弹性盒子的子元素排列方式 */
 -webkit-box-orient: vertical;
 /* -webkit-box-orient: horizontal; */
}