应用场景分析:

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

    (有两个使用场景: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. 【算法】LeetCode算法题-Two Sum

    程序 = 数据结构 + 算法. 算法是每一位程序员学习成长之路上无法避开的重要一环,并且越早接触越好.今后会每天做些算法题,至少每天做一道题目,同时会记录自己的解题思路和代码,通过[算法]专题来分享. ...

  2. Linux 小知识翻译 - 「UTC 和 JST」

    这周解释下「UTC 和 JST」. 地球上的国家之间是存在时差的.然而互联网是遍布全球的网络,跨国境的数据传输是很频繁的.因此,互联网上的服务器就需要一个共通的时间. 实际上,互联网上的服务器,大部分 ...

  3. 【Linux常见问题】Centos7的网络配置问题

    在配置Centos7网络的时候,可能出出现虚拟机.本地以及外网三者之间ping不通的问题,可以从以下的几个方面排查: 1.确定需要管理员权限才能修改配置网络,如下图: 需要点下更改设置,然后出现下面的 ...

  4. Django-rest-framework 接口实现 rest_framework 中有已经定义好的 工具类 mixins generics viewsets

    rest_framework.mixins 请求业务 的 5 种实现 ​ mixin(混合类):不能单独使用,和其它类搭配起来使用(利用了Python支持多继承) rest_framework.mix ...

  5. UVA437-The Tower of Babylon(动态规划基础)

    Problem UVA437-The Tower of Babylon Accept: 3648  Submit: 12532Time Limit: 3000 mSec Problem Descrip ...

  6. Android测试(三):本地单元测试

    原文:https://developer.android.com/training/testing/unit-testing/local-unit-tests.html 如果你的单元测试没有依赖或者只 ...

  7. linux驱动编写之poll机制

    一.概念 1.poll情景描述 以按键驱动为例进行说明,用阻塞的方式打开按键驱动文件/dev/buttons,应用程序使用read()函数来读取按键的键值.这样做的效果是:如果有按键按下了,调用该re ...

  8. redis底层设计(五)——内部运作机制

    5.1 数据库 5.1.1 数据库的结构: Redis 中的每个数据库,都由一个redis.h/redisDb 结构表示: typedef struct redisDb { // 保存着数据库以整数表 ...

  9. 通用权限管理系统多语言开发标准接口 - java,php 调用标准接口程序参考

    1:公司里有多个业务系统,需要进行统一重构,有PHP的.有Java的.有.NET的,甚至还有 Delphi 的. 2:公司里有多个数据库系统,有mysql的.有sqlserver的.还有oracel的 ...

  10. 根据指定条件使CheckBox 无法选中

    var trList = $("#tab1").children("tr")for (var i=0;i<trList.length;i++) {var ...