目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果

首先把文字设为:display: inline-block;

然后设置省略: overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis;

这时我们会发现,文字省略实现了,但是文字和图标不对齐了,如下

这是因为行内元素默认的是基线对齐vertical-align: baseline,设置overflow: hidden后会使它的基线变为下边缘,而其他元素为了对齐,就会向下偏移

解决方案:

1. 设置文字vertical-align: top

2. 给一行中的其他元素也设置overflow: hidden

3. 设置元素float

关于文本设置overflow:hidden后引起的垂直对齐问题的更多相关文章

  1. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  2. 清除浮动2-父元素设置overflow:hidden

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  3. 给元素设置overflow:hidden,pc端正常,但移动端依然可以滑动

    给设置overflow:hidden的元素设置position:fixed即可解决

  4. 解决BootstrapTable设置height属性后,表格不对齐的问题

    解决BootstrapTable设置height属性后,表格不对齐的问题 2018年03月06日 09:56:54 nb7474 阅读数 5920     一般在使用BootstrapTable 插件 ...

  5. inline-block元素overflow:hidden对齐问题

    inline-block元素设置overflow:hidden后,其本身会上移 解决方法:在该元素或其父元素上设置vertical-align:bottom 原因解释:inline-block元素被设 ...

  6. overflow:hidden 影响inline-block元素周围元素下移

    前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,( ...

  7. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  8. overflow:hidden的使用

    (1)overflow:hidden可以用来隐藏溢出的文本内容 给定内容的大小(宽高)超出后自动隐藏 <body>     <div class="box"> ...

  9. CSS中为什么overflow:hidden能清除浮动(float)的影响?原理是什么?

    http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...

随机推荐

  1. Tomcat中用JNDI方式加载JDBC DataSource以连接数据库

    概括一下,大致分为四步:安装驱动,填充context.xml,填充web.xml,编写程序取得连接.通过一个小DEMO对这种配置方式有了一点了解,以tomcat6.0连接mysql5.0.8数据库为例 ...

  2. angular ts处理日期格式

    引入DatePipe import {DatePipe} from '@angular/common'; 添加provider @Component({ providers: [DatePipe] } ...

  3. Centos7搭建OpenNebula云平台

    OpenNebula概述 OpenNebula是专门为云计算打造的开源系统,用户可以使用Xen.KVM.VMware等虚拟化软件一起打造企业云.利用OpenNebula可以轻松构建私有云.混合云.公开 ...

  4. 在gitlab新建分支,IDEA切换时找不到的解决办法

    VCS——>Git——>Fetch

  5. 一台服务器部署多台tomcat

    如题,多个项目部署在一台服务器.减少容错性,觉得分开部署,这样一个tomcat挂了不会影响另一个项目.看配置和应用大小决定数量,一般四五个没问题,也有单台服务器部署8个tomcat稳定运行的. 下面记 ...

  6. pcm、wav、amr说明

    wav比pcm多44个字节(在文件头位置多)

  7. QML随机颜色

    color=Qt.rgba(Math.random(),Math.random(),Math.random(),1)

  8. hadoop记录-flink测试

    1.启动集群 bin/start-cluster.sh 2.jps查看进程 3.打开网页端(192.168.66.128:8081) 4.造数据:nc -lk 9000 5.执行./bin/flink ...

  9. 深入理解JVM+G1+GC.pdf (中文版带书签)

    目录 序 VII前言 IX 第1章 JVM & GC基础知识 11.1 引言 21.2 基本术语 31.2.1 Java相关术语 41.2.2 JVM/GC通用术语 241.2.3 G1涉及术 ...

  10. cudaGetDevice() failed. Status: cudaGetErrorString symbol not found.怎么解决

    我是在使用anaconda的Spyder写一个数字识别的任务的时候遇到这个问题的,当时我以为是我的函数库有问题,然后安装了很多东西都没用,然后百度的答案都很模糊,在我尝试了一天一下午之后,找到了问题原 ...