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布局技巧汇总的更多相关文章

  1. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  2. div+css 布局技巧总计

    一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...

  3. Html和CSS布局技巧

    单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...

  4. 史上最全Html与CSS布局技巧

    单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父 ...

  5. Html与CSS布局技巧

    一.单列布局 1.水平居中:(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parend元素) 1-1:使用inline-block和text-align实现: .par ...

  6. Html利用CSS布局技巧

    单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...

  7. css布局技巧

    CSS用户界面样式 鼠标样式currsor li{ cursor:pointer: } 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 属性值 描述 default 默认 pointer ...

  8. 史上最全Html和CSS布局技巧

      单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元 ...

  9. css布局知识点汇总

    昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...

随机推荐

  1. zuul入门(4)zuul的注解@EnableZuulServer和@EnableZuulProxy

    @EnableZuulServer.@EnableZuulProxy两个注解 @EnableZuulProxy简单理解为@EnableZuulServer的增强版,当Zuul与Eureka.Ribbo ...

  2. SpringCloud的注解:EnableEurekaClient vs EnableDiscoveryClient

    What's the difference between EnableEurekaClient and EnableDiscoveryClient? In some applications, I ...

  3. 【52ABP实战教程】0.1-- Devops如何用VSTS持续集成到Github仓库!

    工欲善其事,必先利其器.在开始正式的教程之前我们先来聊聊准备工作. 管理工具会VSTS. 代码管理会用GITHUB. 服务器会用Azure. 所有的东西都是利用现有服务.不会说自己从虚拟机开始玩.我们 ...

  4. C#微信公众号——消息处理

    ​当普通微信用户向公众账号发消息时,微信服务器将POST消息的XML数据包到开发者填写的URL. 一.接收POST请求,处理XML信息 public void ProcessRequest(HttpC ...

  5. HTML-----<a>、<table>、<form>解析

      超链接 anchor 锚 <a href="url">内容</a> Href Hypertext reference 引用 URL(Uniform Re ...

  6. HDU1028【母函数】

    题目:给你数n,问n可以有哪些组成方案(这些n的数字个数不超过n),母函数模板题 #include <cstdio> #include <cstring> #include & ...

  7. zoj 3950 how many nines

    https://vjudge.net/problem/ZOJ-3950 题意: 给出两个日期,计算从第一个日期开始到第二个日期,每一天的日期中的9加起来一共有多少个. 思路: 看题解补的题.首先看这题 ...

  8. php过滤表单提交的html等危险代码

    表单提交如果安全做得不好就很容易因为这个表单提交导致网站被攻击了,下面我来分享两个常用的php过滤表单提交的危险代码的实例,各位有需要的朋友可参考. PHP过滤提交表单的html代码里可能有被利用引入 ...

  9. Java多线程之interrupt()的深度研究

    近期学习Java多线程的中断机制,网上的帖子说得很浅,并没深究其原理.看了Java源码,对Java的中断机制有了略深入的理解,在这篇文章中向感兴趣的网友分享下.这篇文章主要通过一个典型例子对中断机制进 ...

  10. 使用python实现人脸检测

    人脸检测 人脸检测使用到的技术是OpenCV,上一节已经介绍了OpenCV的环境安装,点击查看. 功能展示 识别一种图上的所有人的脸,并且标出人脸的位置,画出人眼以及嘴的位置,展示效果图如下: 多张脸 ...