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.行内元素简介行内元素可以在一行中 ...
CSS 行内元素设置高度
设置line-height属性行内元素设置高度,并且文本垂直水平居中 span {background: red;line-height: 100px;align-items: center;dis ...
css 行内元素与块级元素
因为老是记不清行内元素和块级元素所以把该记的放在这行内元素 css行内元素的特点: 可以和其他元素处于一行,不用必须另起一行. 元素的高度.宽度及顶部和底部边距不可设置. 元素的宽度就是它包含的文 ...
行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...

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

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

最新文章

热门文章