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

首先把文字设为：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. APP：目录

    ylbtech-APP:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部     7.返回顶部   8.返回顶部   9.返回顶部   ...

  2. 算法习题---5.1大理石在哪（UVa10474）

    一:题目 现有N个大理石,每个大理石上写了一个非负整数.首先把各数从小到大排序,然后回答Q个问题.每个问题问是否有一个大理石写着某个整数x,如果是,还要回答哪个大理石上写着x.排序后的大理石从左到右编 ...

  3. 改进初学者的PID-采样时间

    最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...

  4. elasticsearch关键词查询不分词

    $query = [ 'bool' => [ 'must' => [ 'match_phrase' => ['content' => $word] //$word词不被分词 ] ...

  5. 【Leetcode_easy】917. Reverse Only Letters

    problem 917. Reverse Only Letters solution: class Solution { public: string reverseOnlyLetters(strin ...

  6. tomcat 启动闪退解决方法

    当我们在windows上面进行项目的部署与启动的时候有的时候tomcat在进行启动的时候会删一下就退了,这个时候一般是里面启动的时候设置的jdk的问题下面咱们来看一下具体解决方案 编辑我们的start ...

  7. vue之$event获取当前元素的节点

    <p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // ...

  8. LeetCode 104. 二叉树的最大深度(Maximum Depth of Binary Tree)

    104. 二叉树的最大深度 104. Maximum Depth of Binary Tree 题目描述 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说 ...

  9. Nginx启动和停止

    启动nginx [root@LinuxServer sbin]#  /usr/local/nginx/sbin/nginx     -c     /usr/local/nginx/conf/nginx ...

  10. 【转帖】linux date 显示指定时区的时间 借助TZ 环境变量 export TZ=Asia/Shanghai 或 America/New_York

    linux date 显示指定时区的时间 借助TZ 环境变量 export TZ=Asia/Shanghai 或 America/New_York 2015-02-10 10:58:22 youcha ...