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

1、单行文本省略显示

 p{
            width: 300px;
            height: 30px;
            line-height: 30px;
            border: 2px solid red;

　　　　　　　　　　/* 禁止文本换行 */

           　　　white-space:nowrap;

           　　  /* 文本溢出的部分隐藏 */

            　　 overflow: hidden;

                /* 文本溢出的部分用省略号表示 */

                text-overflow: ellipsis;

    }

 

 2、多行文本省略显示

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