日常实用css布局技巧汇总

时间:2023-03-08 16:14:01

1.单行完整显示,多行省略显示。

  .box {
    width: 100px;     //必要
    display: -webkit-box;    //必要
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;  //必要
    -webkit-line-clamp: 2;  //必要
    -webkit-box-orient: vertical;  //必要
  }

2.对高度不定的容器设置背景(可能滚动) 

  .container {

    width: 100%;

    position: relative;    //absolute也能达到效果,视具体情况而定

    top: 0;

    bottom: 0;

    min-height: 100%;

    background-color: #f1f1f1;

  }

3.单行完整显示,多行正常换行

  .box{

    width: 100px;       //必要

    word-warp: break-word;   //必要

    word-break: break-all;      //必要

  }