首页 > Web开发 > 详细

日常实用css布局技巧汇总

时间:2017-11-08 14:05:27      阅读:226      评论:0      收藏:0      [点我收藏+]

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

  }

 

日常实用css布局技巧汇总

原文:http://www.cnblogs.com/zifayin/p/7803477.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!