css 常用

下划线

.Underline{
     cursor:pointer;
     text-decoration:underline;
}

css 两行文本超出显示省略号(...)

这是单行的


width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;

超出两行

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 

1. css 实现瀑布流

flex 布局实现

        .box {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }

column 多行布局实现瀑布流

.box{
   column-count: 3;
   column-gap: 10px;
}
posted @ 2023-02-02 10:54  过好每一天2022  阅读(16)  评论(0)    收藏  举报