首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么overflow:hidden不适用于我的<p>元素?

overflow:hidden不适用于<p>元素的原因可能是由于以下几个方面:

  1. <p>元素默认具有块级属性,会自动占据一行,因此无法被父元素的overflow:hidden属性所裁剪。overflow:hidden属性主要用于裁剪溢出的内容,而不是用于改变元素的布局。
  2. <p>元素可能包含了浮动元素或绝对定位元素,这些元素的位置不会受到overflow:hidden的影响。如果想要裁剪这些元素,可以考虑使用clearfix清除浮动或者设置父元素为相对定位。
  3. <p>元素的高度可能被内容撑开,导致无法被overflow:hidden裁剪。可以尝试设置固定高度或者使用其他布局方式来解决这个问题。

总结起来,overflow:hidden属性主要用于裁剪溢出的内容,而不是用于改变元素的布局。如果想要裁剪<p>元素,可以考虑调整元素的布局方式或者使用其他CSS属性来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端学习笔记之css清除浮动float七种常用方法总结和兼容性处理

高度塌陷:浮动元素元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动属性clear...具体清楚浮动方法主要一下几种: 1、clear清除浮动(添加空div法) # 在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden...# 缺点:在浮动元素高度不确定时候不适用 3、方法:以浮制浮(父级同时浮动) # 何谓“以浮制浮”呢?就是**让浮动元素父级也浮动**。...6、给父级添加overflow:hidden 清浮动方法; # 问题:需要配合 宽度 或者 zoom 兼容IE6 IE7; overflow: hidden; *zoom: 1; 7、万能清除法 ...;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;} 需要注意东西: after

60630

容易被误解overflow:hidden

但是,很多人对这个属性是存在着一定误解,网上很多入门资料或文章都只提到overflow:hidden加固定宽度(或高度)可以强制隐藏内部超出容器内容。...overflow:hidden并不隐藏所有溢出元素 对于overflow:hidden最大误解时:当一个具有高度和宽度中至少一项容器应用了overflow:hidden时,其内部任何溢出内容都将被剪裁...首先,我们知道overflow:hidden并不是万能,要想彻底剪裁它所有子元素,它不但要有overflow:hidden,而且还要作为所有子元素包含块。...这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了,你才知道是为什么。...其次,如果我们先定义了overflow:hidden防止容器被撑开,或者这个方法做了神马图文混排、清除浮动之类处理,甚至是用了overflow:hidden来实现块级上下文这样上流东东,突然产品又说里面的一个浮层要显示

3.3K110

最全CSS浏览器兼容整理

例如某一个wrapper如下定义: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} ③对于排版,我们用得最多css描述可能就是...} 11.高度不适应 高度不适应是当内层对象高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。...; } p对象中内容 解决方法:在P对象上下各加2个空div对象CSS代码:.1{height:0px;overflow...:ellipsis; overflow: hidden; } --> 16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!...1px左右高度容器 IE6下这个问题是因为默认行高造成,解决方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px 18.怎么样才能让层显示在

1.5K31

一篇文章搞定多列布局--等宽,等高,自适应

margin-left了,而是overflow: 这种方案如果要间距,可以在left上设置一个margin-right: 20px;。...为什么overflow:hidden可以决绝浮动环绕问题呢,这其实用到了BFC原理。...但如果我给上面第一个child再套一个容器,使用overflow:hidden;他就成了一个BFC,根据BFC特性,BFC元素不会影响外面的元素,margin就不会合并,两个child间距就是30px...两个子级设置display为table-cell,这样他们其实就相当于table两个单元格。由于我们要固定左边宽度,父级table应该使用布局优先,即table-layout: fixed;。...在前面定宽+自适应基础上给左右子元素都写一个极大padding-bottom,这样两个子元素高度都很大了,然后我们一个同样margin-bottom和父级overflow:hidden

2.7K10

前端知识点总结(html+css)(上)

3. css3新增伪类 p:first-of-type 选择属于父元素首个p元素 p:last-of-type 选择属于父元素最后一个p元素 p:only-of-type 选择属于父元素唯一...visibilty:hidden //隐藏对应元素,在文档中仍保留位置 opacity:0 //隐藏元素,占位置,可添加事件 9. css中overflow属性 scroll //必会出现滚动条...溢出文字省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...: hidden; -webkit-box-orient: vertical; //(设置对齐模式) text-overflow: ellipsis //(以用来多行文本情况下,省略号“…”...为什么要初始化css 因为浏览器兼容问题,不同浏览器对有些标签默认值是不同,如果没有初始化CSS,往往会导致页面在不同浏览器之间出现差异。

26510

【CSSJS】如何实现单行/多行文本溢出省略(...)--老司机绕过坑道正确姿势

关于overflow: hidden 这里我们需要注意到一点:这里overflow并不是设置为父级元素div属性,而是p标签属性,需要和overflow普通用法区分开来 1overflowhidden...普通用法:用在块级元素(例如div)外层隐藏内部溢出元素 2overflow: hidden特殊用法:在上述例子中配合text-overflow: ellipsis;white-space: nowrap...;实现p元素隐藏自身溢出并设置(...)效果 关于text-overflow: ellipsis; 这一属性依赖于overflow: hidden存在,只有设置了overflow:hidden它才是能够生效...实践出真知,让我们来试一下,去掉CSS样式中white-space:nowrap,demo: 这次,没能隐藏成功,那如果我们overflow:hidden是设在父级元素div中呢?...'; break;将父级元素viewoverflow设置为hidden,并且将末尾三个文字...取代,同时跳出for循环 perfect!

2.4K80

网页设计中另人头疼浏览器兼容问题

}  11.高度不适应    高度不适应是当内层对象高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。   ...; }          p对象中内容          解决方法:在P对象上下各加2个空div对象CSS代码:.1{height:0px;overflow...ellipsis;      overflow: hidden;      } –> 16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!...1px左右高度容器 IE6下这个问题是因为默认行高造成,解决方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px 18.怎么样才能让层显示在...例如某一个wrapper如下定义: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 2、margin加倍问题。

1.4K20

原生CSS实现单行多余省略和多行多余省略

在日常开发中,经常会遇到一些省略文本需求,比如“文本在一行显示,超出部分在结尾省略号显示”、“最多显示三行,超出部分在第三行末尾省略号显示”。 这些需求纯CSS即可实现。...{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /*!... 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言一个应用... 单行省略 .one-line 定义了单行省略样式,样式含义: overflow: hidden 隐藏超出元素区域内容 text-overflow: ellipsis 以省略号显示超出文本...: hidden 隐藏超出元素区域内容 text-overflow: ellipsis 以省略号显示超出文本 display: -webkit-box; 修改布局方式 -webkit-box-orient

3.2K20

Web程序员们,你准备好迎接HTML5了吗?

}  11.高度不适应    高度不适应是当内层对象高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。   ...; }          p对象中内容          解决方法:在P对象上下各加2个空div对象CSS代码:.1{height:0px;overflow...ellipsis;      overflow: hidden;      } –> 16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!...1px左右高度容器 IE6下这个问题是因为默认行高造成,解决方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px 18.怎么样才能让层显示在...例如某一个wrapper如下定义: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 2、margin加倍问题。

77520

自适应宽度元素单行文本省略用法探究

: nowrap; overflow: hidden; } 单行文本省略和元素及其父元素width属性都无关 有很多文章提到单行文本省略时都会添加多一个条件,那就是设置width属性。...text-overflow:ellipsis; white-space: nowrap; overflow: hidden; } 单行文本省略...最后,我尝试着给p标签设置宽度为auto或100%,结果不变;给p标签和span标签设置固定宽度值为300px,结果不变;其他标签把p标签和span标签包裹起来,结果不变;给包裹元素设置固定宽度值,结果还是一样...2)display为flex元素元素flex-item如果是自适应宽度时,flex-item内元素实现单行文本省略,需要给flex-item添加overflow:hidden样式 display...:fixed样式 4)display为flex元素元素flex-item如果是自适应宽度时,flex-item内元素实现单行文本省略,需要给flex-item添加overflow:hidden样式

2.4K30

CSS float浮动深入研究、详解及拓展(二)

我们可以这个(“包裹与破坏”)解释为什么浮动可以让li这类block水平元素水平排列。...非IE浏览器常用overflow属性,overflow:hidden;或是overflow:scroll都可以,不过由于后者经常一不小心出现滚动条,所以前者更多些。...2. overflow + zoom方法 .fix{overflow:hidden; zoom:1;} 此方法优点在于代码简洁,涵盖所有浏览器,可谓不错选择啊。...不过也是有问题,就是这个overflow:hidden;是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负绝对定位,岂不是直接被裁掉了,所以此方法是有不小局限性。...于是呢,我们可以CSS代码生成一个具有clear属性元素,其中关键样式就是content了。

58500

清除过浮动

Demo  优点:比空标签方式语义稍强,代码量较少 缺点:同样有违结构与表现分离,不推荐使用  3)父元素设置 overflowhidden 通过设置父元素overflow值设置为hidden...缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出元素;04年POPO就发现overflow:hidden会导致中键失效,这是我作为一个多标签浏览控所不能接受。...至此,您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了,真是因为父元素创建了新BFC。...对于张鑫旭在对《overflow与zoom”清除浮动”一些认识 》一文中对于包裹来解释闭合浮动原理,我觉得是不够严谨,而且没有依据。...请看优雅Demo 进一步了解请看: 《clearfix改良及overflow:hidden详解【译】》 在实际开发中,改进方案一由于存在Unicode字符不适合内嵌CSSGB2312编码页面,

84220
领券