CSS實戰篇 - 文字隱藏

.效果圖

二.相關代碼

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus?">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>文字隱藏</title>
 <style>
 div.elli{
 border:1px solid;
 overflow:hidden;/*內容會被修剪，并且其余內容是不可見的*/
 white-space:nowrap;/*強制在一行顯示*/
 text-overflow:ellipsis;/*顯示省略符號來代表被修剪的文本*/
 width:200px;
 height:20px;
 }
 div.clip
 {
 border:1px solid;
 overflow:hidden; /*超出部分隱藏*/
 white-space:nowrap;/*強制在一行顯示*/
 text-overflow:clip;
 width:200px;
 height:20px;
 }
 div.hide
 {
 overflow:hidden;
 border:1px solid;
 width:200px;
 height:50px;
 }
 div.scroll
 {
 overflow:scroll;/*內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容*/
 border:1px solid;
 width:200px;
 height:50px;
 }
 </style>
</head>
<body>
<h3 style="color: #98bf21">1.多余文字自動裁剪</h3>
<div class="clip">如果此處的文字較多，將自動裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多余文字省略號代替</h3>
<div class="elli"><a href="#">如果此處的文字較多，將自動用省略號代替！</a></div>
<br>
<h3 style="color: #98bf21">3.多余文字自動隱藏</h3>
<div class="hide">如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！</div>
<br>
<h3 style="color: #98bf21">4.多余文字出現滾動條</h3>
<div class="scroll">如果此處的文字較多，將出現滾動條！如果此處的文字較多，將出現滾動條！如果此處的文字較多，將出現滾動條！</div>
</body>
</html>

三.名詞釋義

3.1 overflow

3.2 white-space

3.3 text-overflow

、通過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 使其假不可見

言

2021 年最后一天，疫情還沒有完全結束，武漢市政府也取消了跨年活動。今晚，就連地鐵都提前到 9 點關閉，大家都在家里跨年。這不，我也在家里跨年。不過我并沒有看晚會，而是整理了一篇前端小技巧，算是給自己 2021年一個小小的總結。

正文

用 CSS 隱藏元素有很多種方法，這里介紹 3 種常見的。

opacity: 0

特點是【看不見，占空間，摸得著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

visibility: hidden

特點是【看不見，占空間，摸不著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

display: none

特點是【看不見，不占空間，摸不著】

元素隱藏
改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

接下來，我們來編寫代碼驗證一下。首先寫入三個方塊，對中間的橙色方塊添加點擊事件。代碼及頁面效果如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

opacity: 0

對中間橙色方塊添加 opacity: 0 樣式，代碼及效果如下：

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .opacity {opacity: 0}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange opacity' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

visibility: hidden

對中間橙色方塊添加 visibility: hidden 樣式，代碼及效果如下：

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .visibility {visibility: hidden}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange visibility' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

display: none

對中間橙色方塊添加 display: none 樣式，代碼及效果如下：

元素隱藏
改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .display {display: none}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange display' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

結尾

本人 2021 年度成就總結：

學術方面，憑借個人努力，在核酸檢測領域產出多份數據真實詳盡的報告。
健康方面，保證膳食纖維攝入，具體表現為每日堅持吃瓜，吃好瓜，吃大瓜。
商業方面，與各大平臺合作，全面參與投資 618、雙 11、雙 12 等千億級重大項目。
環保方面，股票基金一片綠，綠水青山就是金山銀山。在廢物利用領域更是成績斐然：自己作為廢物，常常被別人利用。
運動方面，專注于水上項目，在摸魚、劃水等小項上有突出表現。

最后，祝大家元旦快樂～

在線咨詢

上一篇：HTML+CSS之仿唯品會注冊頁面（前段小白）
下一篇：CSS+HTML ul li列表原點如何相連？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS實戰篇 - 文字隱藏

.效果圖

二.相關代碼

三.名詞釋義

言

正文

opacity: 0

visibility: hidden

display: none

opacity: 0

visibility: hidden

display: none

結尾

您的項目需求