日常实用css布局技巧汇总

Posted 2020-10-13

 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;      //必要

　　}