应用场景分析:

  一、当你的文字限定行数,超出部分的文字用省略号显示。

    (有两个使用场景:1、单行 2、多行)

// 单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
// 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;
overflow: hidden;

  二、当你的高度不定要垂直居中时,这里我们用盒模型布局。

  (这里要对盒模型做兼容性处理,不然有些手机系统不兼容的。切记~~~~~~~)

        display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
justify-content: center;
align-items: center;
有些属性不懂的,可以接着看。懂的到这里就ok了:    
justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

  

 

css行内省略号、垂直居中的更多相关文章

  1. CSS行高——line-height 垂直居中等问题

    CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...

  2. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

  3. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  5. CSS行高line-height的一些深入理解及应用

    一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a ...

  6. DIV+CSS如何让文字垂直居中?(转)

    此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...

  7. DIV+CSS如何让文字垂直居中?

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  9. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...

  2. ubuntu下安裝sogou拼音

    方法/步骤 打开搜狗输入法Linux版的官网http://pinyin.sogou.com/linux/?r=pinyin,并下载你需要的版本,这里选择64位版. 在Ubuntu14.01下可以直接点 ...

  3. 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  4. 构建企业 YUM仓库

    构建企业 YUM仓库 本地光盘提供基础软件包Base yum缓存提供update软件包 yum缓存提供常用软件包: nginx, zabbix, docker, saltstack 环境准备 系统 I ...

  5. 已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包,此包可能与项目不完全兼容

    已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包,此包可能与项目不完全兼容 NU1202: 包 System.Run ...

  6. Spring Security(二十二):6.4 Method Security

    From version 2.0 onwards Spring Security has improved support substantially for adding security to y ...

  7. 2018.11.10 FCC java分享大会

    一.<android热修复背后的java技术> 1.类是如何被jvm加载的 (1)由类加载器加载 (2)类加载器分类,基于双亲委派原则(建议) (3)关键代码 先去判断是否已经加载,如果没 ...

  8. copyOf数组复制方法的使用(数组扩容练习)

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * 我们使用数组存储了50名学生的考试信息 , 今天 ...

  9. 理解JSON Web Token (一)

    一:理解单系统登录的原理及实现? web应用采用的 browser/server 架构的,http是无状态协议的,也就是说用户从A页面跳转到B页面会发起http请求,当服务器返回响应后,当用户A继续访 ...

  10. 移动端h5页面编写样式重置

    @charset "UTF-8"; /* stylelint-enable */ /* 重置样式 */ * { -webkit-tap-highlight-color: trans ...