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

Posted 2023-03-20 wanganli

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; */