css设overflow:hiden行内元素会发生偏移的现象

父级元素包含几个行内元素

<div id="box"><p><span>按钮</span><span>测试文字文字文字测试文字文字文字</span><span>看这里</span></p></div>

#box p{width: 800px;font-size: 30px;}#box p span{display: inline-block;box-sizing: border-box;/*vertical-align:top/bottom*/}#box p span:nth-child(2){padding-left: 10px;width: 350px;/* overflow: hidden;white-space: nowrap;text-overflow: ellipsis;*/}

正常显示，且在同一行；

当设置overflow:hidden之后，元素出现不对齐的情况

原因：行内元素的默认对齐方式是基线对齐即（vertical-align：baseline），设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘；其他行内元素依然还是基线对齐就会出现下沉的视觉效果

解决方法：

1、重新设置所有行内元素的对齐方式为 vertical-align:top 或者 bottom （亲测好用）

2、设置所有的行内元素的overflow不为visible

3、设置flex布局

css设overflow:hiden行内元素会发生偏移的现象相关推荐

css设置overflow:hiden行内元素会发生偏移的现象
父级元素包含几个行内元素 <div id="box"><p><span>按钮</span><span>测试文字文字文字测 ...
[css] img标签是行内元素，为什么却能设置宽高
[css] img标签是行内元素,为什么却能设置宽高原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...
css变换transform 以及行内元素的一些说明
变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样] #test { transform: transl ...
css text-align属性，行内元素，块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
CSS之布局（行内元素的盒模型）
行内元素的盒模型: <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
文章目录一.行内元素 1.行内元素简介 2.行内元素特点 3.代码示例二.行内块元素 1.行内块元素简介 2.行内块元素特点 3.代码示例一.行内元素 1.行内元素简介行内元素可以在一行中 ...
块元素、行内元素、行内块元素
一.块元素 block element 块元素的特性独霸一行,总是在新行上开始宽度缺省是它父级元素的100%,除非设定一个宽度高度.行高.外边距.内边距都可以设置可以容纳其他内联元素或者其他块 ...
html块级元素和行内元素吗,块级元素和行内元素有什么区别
块级元素和行内元素的区别:行内元素可以与其它行内元素并排,块级元素独占一行,不能与其他任何元素并列:行内元素不能设置宽高,块级元素可以设置宽高. 本文操作环境:windows10系统.html 5.宏 ...
html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...

css设overflow:hiden行内元素会发生偏移的现象

css设overflow:hiden行内元素会发生偏移的现象相关推荐

最新文章

热门文章