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小時內與您取得聯系。

整合營銷服務商