如何用 CSS 将超出显示宽度的内容隐藏起来

html-css022

如何用 CSS 将超出显示宽度的内容隐藏起来,第1张

一般的文字截断(适用于内联与块):

.text-overflow

{display:block/*内联对象需加*/width:31em/*指定宽度*/word-break:keep-all/*

不换行

*/

white-space:nowrap/*

强制在同一行内显示所有文本,直到文本结束或者遭遇

br

对象。不换行

*/overflow:hidden/*

内容超出宽度时隐藏超出部分的内容

*/

text-overflow:ellipsis/*

IE

专有属性,当对象内文本溢出时显示省略标记(...)

;需与overflow:hidden一起使用。*/}对于表格文字溢出的定义:table{width:30em

table-layout:fixed/*

只有定义了表格的布局算法为fixed,下面td的定义才能起作用。

*/}td{width:100%

word-break:keep-all/*

不换行

*/

white-space:nowrap/*

不换行

*/

overflow:hidden/*

内容超出宽度时隐藏超出部分的内容

*/

text-overflow:ellipsis/*

当对象内文本溢出时显示省略标记(...)

;需与overflow:hidden一起使用。*/}需要注意的是,这个东东只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。

使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看

使用overflow:hidden;来隐藏溢出的文字或图片适用推荐,CSSoverflow手册查看

使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否,CSSoverflow-y手册查看,CSS手册查看overflow-x

CSS:

CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表:外部样式表、内部样式表和内联样式。

CSS具有精简代码,降低重构难度、提升网页访问速度、利于SEO优化等优势,能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

在网页中我们经常看到鼠标划上时会显示一些网页中一开始没有的东西,例如二级菜单,或者鼠标划上图片时会显示一些淡入淡出的效果

问:这是怎么原理实现的?

其实就是显示和隐藏

问:那么这个现实和隐藏如何实现呢?

其实方法有很多,下面我来带着大家看一下每种实现方式和其不同点

无论使用哪一种方式实现,首先这个东西必须先存在,我们先在结构中存在

一级导航

二级导航 二级导航 二级导航

这样的结构写法在我们的页面中一开始是所有的导航都是显示的

我们想要实现一开始只显示一级导航效果,当鼠标划上一级导航的时候显示二级导航效果

方法一:用display:none和display:block方式实现

一开始给p标签一个display:none

当鼠标划上div时让p标签显示 div:hover p{display:block}

注意:此方式可以实现显示和隐藏的效果,但是不支持过渡效果,也就是你不能看到逐渐显示的过程

方法二:用opacity:0; opacity:1方式实现

一开始给p标签一个opacity:0

当鼠标划上div时让p标签显示 div:hover p{opacity:1}

注意:此方式可以实现显示和隐藏的效果,支持过渡效果,在p标签的初始状态上加上一个transition:1s你是可以看到从无到有淡入淡出的效果的

>need-to-insert-img

方法三:用height:0; height:100px方式实现

一开始给p标签添加一个height:0但是由于里面有二级菜单的内容文字所以会存在溢出,添加一个overflow:hidden即可解决

当鼠标划上div时让p标签显示 div:hover p{height:100px}

注意:此方式可以实现显示和隐藏的效果,支持过渡效果,在p标签的初始状态上加上一个transition:1s你是可以看到类似于卷帘门从上向下拉的效果。

哈哈是不是学到了,好了不说了,老铁们自己看着办法,反正我把方式方法都告诉大家了,是收藏还是点赞。