CSS 文本超出隐藏

行文本超出隐藏

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 600px;
margin: 100px auto;
border: 1px solid red;

/*文本是否换行*/
white-space: nowrap;
/*文本超出: 显示省略符号来代表被修剪的文本。*/
text-overflow: ellipsis;

/*超出隐藏*/
overflow: hidden;
}
</style>
</head>
<body>
<p>是指阴影的垂直偏移量，其值也可以是正或负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径.................................................
</p>
</body>
</html>

多行文本超出隐藏

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 600px;
margin: 100px auto;
border: 1px solid red;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<p>是指阴影的垂直偏移量，其值也可以是正或负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径......
</p>
</body>
</html>

注意: 目前只在webkit内核浏览器(Chrome、Safari、移动端浏览器)中生效

CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。

动画： 一些CSS隐藏元素的方法一般是全有或者全无，元素要么是完全可见，要么是完全不可见，并且没有中间状态。其他的，比如透明度，可以是一个范围的值，所以在这中间过程插入动画成为可能；
可访问性： 下面的每一种方法都会在视觉上隐藏一个元素，但不一样会真正的去除DOM元素。有一些方式隐藏元素后，屏幕阅读器仍然能读取到元素内容；
事件处理： 隐藏元素之后，有些方式元素上的事件仍然能被触发，而有些方式就会导致元素上的事件触发无效；
表现： 浏览器加载并解析 HTML DOM 和 CSS 对象模型后，页面将分三个阶段呈现：布局（生成每个元素的几何位置）、绘制（绘制每个元素的像素）、组合（以适当的顺序放置元素层）。仅导致构图变化的效果明显比影响布局的效果更好。在某些情况下，浏览器还可以使用硬件加速。

下面就来看看CSS中隐藏元素的方式，以及每种方式的优缺点。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。

opacity: N：该属性用来设置元素的透明度；
filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。

div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
复制代码

在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。

注意：opacity 可以设置动画并提供出色的性能，但页面上保留完全透明的元素可能会触发事件。

2. color alpha 透明度

可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
复制代码

这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用 linear-gradient 或类似方法生成的。

Alpha 通道可以设置为：

transparent：完全透明（中间不能插入动画）；
rgba(r, g, b, a)：红色、绿色、蓝色和 alpha；
hsla(h, s, l, a)：色相、饱和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。

3. transform

transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
复制代码

transform 属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。

4. clip-path

clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。

div {
	clip-path: circle(0);
}
复制代码

clip-path为添加动画效果提供了空间，不过它只能在现代浏览器中使用。

5. visibility: hidden

visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。

div {
	visibility: hidden;
}
复制代码

除非使用collapse值，否则元素使用的空间保持不变。

6. display: none

display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。

div {
  display: none;
}
复制代码

然而，在大多数情况下，display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流，或者采用contain属性，否则它的隐藏过程无法设置动画，并将触发页面重新布局。

7. z-index

可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。

div {
  z-index: -1;
}
复制代码

8. position

position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}
复制代码

9. 覆盖另一个元素

通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
复制代码

虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。

10. 缩小尺寸

可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
复制代码

使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比 transform 好很多。

分类：

、通过style属性中的 display : none { 这种是最常用方式之一 }

display : none

这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流

visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

2 、通过style属性中的 visibility : hidden { 这种也是最常用的方式之一 }

visibility : hidden

3 、通过相对定位移动当前元素到屏幕左侧

div{     
    position: relative;     
    left: -100%
}

但是要记住:

1 元素仍然占用标准文档流 2 百分比是相对父元素的宽度和高度的, 并不是相对可视区宽度偏移的

4 、通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示

.div{    
    text-indent: 100%;    
    white-space: nowrap;    
    overflow: hidden;
}

注意点: 此时子元素仍然占用文档流, 只是我们隐藏了超出部分

5 、设置元素的宽度和高度为0, 元素直接消失

.div{    
    width: 0px;    
    height: 0px;
}

注意点:

1 标准文档流是相对于一个容器来说的, 每一个容器有自己的文档流, 我们只关心当前元素所在的文档流 2 高度和宽度都设置为0后, 我们就可以认为此元素不再占用其父元素的标准文档流了, 但是这个容器仍然存在, 这个容器也存在一个标准文档流, 供其子元素使用; 其子元素不会消失, 仍然会正常显示, 但是不会占用其父元素所在的标准文档流( 即子元素显示不会受其影响, 此元素占用文档流的大小也不会受其子元素的影响 )

6 、设置元素透明度为 0

div{    
  opacity: 0;
}

这个感觉有点傻乎乎的, 掩耳盗铃, 不过这个经常用来做动画变换

7、旋转元素, 使与当前页面垂直

div{    
  transform: rotateX(90deg);
}

注意点: 这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此。

8 、缩小元素尺寸到自身的0倍

div{    
  transform: scale(0);
}

注意点: 同上

9 、其它 transform 使其假不可见

在线咨询

上一篇：Python 3.8 即将到来，这是你需要关注的几大
下一篇：解放程序员双手！GPT-3自动生成SQL语句 - 代

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商