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

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

 

posted @ 2023-03-19 23:38  Wanniee  阅读(251)  评论(0)  编辑  收藏  举报