css(显示与隐藏、溢出)

最新推荐文章于 2025-05-26 19:32:20 发布

原创最新推荐文章于 2025-05-26 19:32:20 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨CSS中显示与隐藏元素的各种方法，包括visibility、display、overflow及text-overflow属性的使用技巧，帮助读者理解如何有效管理和控制网页内容的可见性。

显示与隐藏、溢出

知识点1.visibility 显示隐藏

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。这意味着元素仍占据其本来的空间，不过可以完全不可见。

    visibility:hidden与display:none的区别
	visibility:hidden设置不可见的元素也会占据页面上的空间。
	display:none设置元素的不可见， 不占据页面空间。

	visible	默认值。元素是可见的。
	hidden	元素是不可见的。
	collapse  当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
	inherit

知识点2.Display显示隐藏与行内块

inline类型

转换为行内元素，行内元素可以在同一行上，没有宽度，只有行高

block类型

转换为块级元素，一个块占据一行，可以设置宽高

inline-block类型

行内块元素，具备行内元素的特点，也具备块级元素的特点。
希望子元素撑开父级元素的宽度可以使用inline-block

none

隐藏，不显示，不占空间

兼容问题

但是这个属性目前不是所有的浏览器都支持，IE6，IE7不支持该属性，可以实现这种效果。 
在IE下实现display:inline-block效果的方法：先用display:inline-block属性触发块元素，然后再定义display:inline。

知识点3.overflow溢出显示隐藏

overflow属性

			visible： -可见	对溢出内容不做处理，内容可能会超出容器。（默认）
			hidden：--隐藏	隐藏溢出容器的内容且不出现滚动条。
			scroll：--滚动	隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。（不论是否内容溢出都会显示）
			auto：按需出现滚动条	当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

overflow-x和overflow-y

可以单独设置在水平方向上或垂直方向上如果内容超出盒的容纳范围时的显示方式。

	visible： 对溢出内容不做处理，内容可能会超出容器。
	hidden： 隐藏溢出容器的内容且不出现滚动条。
	scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
	auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

我们经常能在网页当中看到一段文字过长出现省略号的效果。
图片上所显示的有2种类型的省略号一种是多行在最后一行出现省略号；可以代码实现这种效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>溢出省略号</title>
<style>
div{
	border:1px solid #0f0;
	width:200px;/*设置宽度*/
	/*以下的三条属性就是一般的强制不变规律的*/
	white-space:nowrap;/*强制不换行*/
	overflow:hidden;/*如果溢出就隐藏*/
	text-overflow:ellipsis;/*文本溢出的时候隐藏的方式用的是省略号*/	
	}
</style>
</head>
<body>
<div>
今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高；
</div>
</body>
</html>

英文和数字强制不会换行；body标签有默认的overflow属性；没有加空格的英文或者数字不会换行；加了空格之后的字母就变成了单词可以换行。

<style>
div{
	border:1px solid #0f0;
	width:200px;/*设置宽度*/
	height:200px;
	overflow:auto;
	word-wrap:break-word;
	}
</style>
</head>
<body>
<div>
avaeshvoehnvoehovgehvoehvgehroigehohroewhgovewhnvgoehouvgheovgehgoehgoeheo
今天我的心情也非常的不错，因为我的高考成绩出来了，而且考今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高的今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高特别的高；
</div>

white-space:nowrap; 文本强制不换行

一般字母和数字没有空格不会换行 但中文会以文字为单位自动换行 这样在一行内文本是不会溢出

text-overflow:ellipsis; 文本溢出时出现省略号的效果

扩展 如何让字母和数字没有空格的情况下自动换行

word-wrap:break-word; 自动换行属性(单词包装)

知识点4.text-overflow文本溢出

	clip	修剪文本。
	ellipsis	显示省略符号来代表被修剪的文本。
	string	使用给定的字符串来代表被修剪的文本。

当文本溢出包含元素时发生的事情。

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>

</head>

<body>

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>