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、移動端瀏覽器)中生效

過去的幾年里，前端開發發生了革命性的變化，變得更高效、更快，當然也更大。 SPA 框架的引入使 Web 開發發生了重大變化。更多繁重的工作轉移到了前端，需要處理更多的事情，例如動態 UI、路由、狀態管理等。因此，程序員習慣于使用新方法和第三方來減輕一些繁重的工作。當然，它有它的優點，但也有缺點，讓我們變得更懶惰。但是如果我告訴你，在前端的這段時間里，你可能錯過了一些基本功能，而不是使用它們，而是使用第三方包甚至更糟糕的是，自定義樣式來實現基本的東西？！是的，當然，讓我們從 HTML 中您可能不知道的 15 個功能的基礎開始，它們將幫助您輕松實現友好的 UI。事不宜遲，我們開始學習吧！

1、內容可編輯屬性

contenteditable 是可以在元素上設置以使內容可編輯的屬性。它適用于 DIV、P、UL 等元素。您需要這樣 <element contenteditable=”true|false”> 設置它。

<h2> Earth 616 superheroes </h2> 
<ul class="content-editable" contenteditable="true">     
 <li> 1. Iron Man</li>     
 <li> 2. Captain America</li>     
 <li> 3. Black Panther</li> 
</ul>

2、詳情標簽（Details）

<details> 標簽向用戶提供按需詳細信息。默認情況下，小部件是折疊的。打開時，它會展開并顯示其中的內容。

<summary> 標簽與 <details> 一起使用實現一個可以折疊打開標題及詳情內容。

<details>     
<summary>Click here to see more from Earth 616</summary>              
<table>
  <tr>                    
    <th>ID</th>                    
    <th>Name</th>                    
    <th>Location</th>                    
    <th>Job</th>                
  </tr>                
  <tr>                    
    <td>1</td>                    
    <td>John Doe</td>                    
    <td>Earth</td>                    
    <td>Human</td>                
 </tr>          
</table>  
</details>

3、Datalist 標簽

<datalist> 標記指定預定義選項列表并提供自動完成功能。

<label for=”superhero”>In case of emergency, which superhero would you call?:</label>
<input list=”superheroes” name=”superhero” id=”superhero”>
<datalist id=”superheroes”>
 <option value=”Iron Man”>
 <option value=”Captain America”>
 <option value=”Black Panther”>
 <option value=”Thor”>
 <option value=”Spider Man”>
</datalist>

4、Range 屬性

范圍輸入類型的表單類似于滑塊范圍選擇器。

<head>
    <script>
        function changeValue(event) {
            let value = event.target.value;
            let output = document.getElementById('output');
            output.value = value;
        }
    </script>
</head>
<body>
    <form method="post">
        <input 
             type="range" 
             name="range" 
             min="0" 
             max="100" 
             step="1" 
             value=""
             onchange="changeValue(event)"/>
     </form>
     <div class="range">
          <output id="output" name="result">  </output>
     </div>
</body>

5、Meter 標簽

<meter> 標簽定義了定義范圍內的標量測量值或分數值

<label for="home">Cloud storage</label>
<meter id="home" value="0.4">40%</meter><br>
<label for="root">Internal storage</label>
<meter id="root" value="0.6">60%</meter><br>

6、 Progress 標簽

<progress> 標簽表示任務的進度。

<label for="home">6/10 tasks done</label>
<progress value="60" max="100" id="home"></progress>

7、顏色選擇器

一個簡單的顏色選擇器。

<p id="colorPicker">Color Picker!</p>
<input type="color" onchange="showColor(event)">

8、標記內容標簽

使用 <mark> 標記突出顯示任何文本內容。

<p>Did you know that <mark>not all heroes wear capes.</mark></p>

9、塊引用和引用

如果您要包含來自不同來源的內容，您絕對應該引用該來源。

<figure>
  <blockquote>
    <p>It's an imperfect world, but its the only one we've got.</p>
  </blockquote>
  <figcaption>--TONY STARK, <cite>IRON MAN</cite></figcaption>  
</figure>

10、縮寫標簽（Abbreviation）

“abbr”是abbreviation的簡稱！這里的想法是，如果您使用標題（例如“Mr.”）或首字母縮略詞（例如“SHIELD”），abbr 標簽會準確指示該縮寫的含義。

<p>Agent Phil Coulson leads a team of highly skilled agents from the     
global law-enforcement organisation known as 
<abbr title="Strategic Homeland Intervention, Enforcement,
and Logistics Division">SHIELD</abbr>. 
</p>

11、<del> and <ins>

實際上有一個標記用于帶刪除線的文本，另一個標記表示替換文本。

<p><del>Iron Man</del>
<ins>Captain America</ins>
is ehmmm.. yea the captain!</p>

12、Output 標簽

<output> 標簽表示計算的結果。通常，此元素定義一個區域，該區域將用于顯示某些計算的文本輸出。

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
    <input type="number" id="a" value="0"> 
      * <input type="number"  id="b" value="0"> 
    = <output name="x" for="a b"></output>
</form>

13、Hidden 屬性

在隱藏元素方面，我們都嘗試過不同的方法，比如使用 opacity:0, visibility:hidden, height:0; width:0, display:none 在我們的 CSS 文件中。每一個都有自己的用例，適用于不同的布局。另一個與它們類似的選項是隱藏的 HTML 屬性。如果一個元素在其上指定了隱藏，它將被隱藏。我碰巧有用于存儲值的隱藏輸入，所以如果您也需要它，請不要吃驚。

<div hidden>...</div>

14、Time 標簽

<time> 標記定義特定時間（或日期時間）。

該元素的 datetime 屬性用于將時間轉換為機器可讀的格式，以便瀏覽器可以提供通過用戶日歷添加日期提醒，搜索引擎可以產生更智能的搜索結果。

<p>The next assemble meeting is postponed on
  <time datetime="2022-12-01">2022-12-01</time>.</p>

15、Audio 標簽

<audio> 標簽將定義一種聲音，該標簽可以與三個支持的文件一起使用。它們是 MP3、WAV 和 OGG。然后瀏覽器將選擇它支持的第一個。

<audio controls>
  <source src=”introduction.ogg” type=”audio/ogg”>       
  <source src=”introduction.mp3” type=”audio/mpeg”>       
  Your browser does not support this audio      
</audio>

結束

好了，今天的分享就到這里，通過本文的學習，你可以輕松的使用HTML原生標簽能力，就能夠實現以前復雜的第三方UI組件提供的功能。感謝你的閱讀，如果你喜歡我的分享，別忘了點贊轉發，讓更多的人看到，最后別忘記點個關注，你的支持將是我分享最大的動力，后續我會持續輸出更多內容，敬請期待。

原文：https://medium.com/codex/i-bet-you-didnt-know-about-these-15-html-features-9b0824dba28f
作者：Arsen Shkenza
非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正

SS的布局有太多種方式，元素的表現也有很多的形式。

像我們熟悉的那些：行內元素、塊元素、列表元素、表格元素、絕對定位、固定定位、浮動、彈性布局、網格布局等等等等。

一個元素的具體渲染可能會受到父子元素、兄弟元素的影響。

大多數情況我們都可以通過一些手段，來解決我們遇到的布局或表現問題。

比如給一個元素賦予了浮動，那么可以通過清除浮動來消除影響，再比如通過絕對定位來調整元素的位置，也可以通過padding或margin等避免其他元素被覆蓋。

但是也有那么一些情況，我們不太好處理，比如某一個元素希望相對于它的父級區域做固定定位，而不是基于整個頁面，能做到嗎？再比如給定一個盒容器，無論子元素怎么排序布局或者浮動，也不會影響其他相鄰盒子的渲染，該怎么做到？

其實不止這些，還有很多的實際場景讓我們很棘手，你是否在設計和實現方面做過平衡和妥協？

對于現在的瀏覽器來說，所支持的CSS功能不允許我們說：我不行，我做不到。

別的不說，今天要講的contain就能用來解決上面的問題，它能做的事情還有很多，基于自身天然的屬性，甚至能輕松提升你的性能！

contain概述

contain表明該元素要獨立于頁面中的其他元素，該元素中的所有內容都被局限在一個獨立的區域，跟其他元素隔離開來，從而使得基于該元素的所有計算都是獨立的，被限制在該DOM子樹中，而不是整個頁面。這樣能夠讓頁面的性能提升。

該元素構成的容器，可以控制其產生的尺寸范圍、樣式作用域、布局方式、繪制區域。會生成新的包含區塊、新的層疊上下文、新的區塊格式化上下文。這些控制手段都對應著不同的局限屬性，在容器內對局限屬性的修改，不會影響容器外的部分，也就不會使得頁面經常重新渲染，尤其在動態修改頁面元素時會帶來更好的性能受益。

我們理解它的時候，不要把它想成是包含的意思，理解成它的作用，是對包含內容的一個局限，之后也會多次用到"局限"這個詞。

示例

我們來對上面所說的內容，做一些示例，來看看它們的實際工作方式。

先構建一個基本的代碼，之后都以這個為基礎改造和演示：

<div style="background-color: bisque;">
  我是父元素
  <div style="background-color: coral;">
    我是子元素
  </div>
</div>
<div style="background-color: lightpink;">
  我是父兄弟元素
</div>

看下現在的效果：

效果

記住這個效果，因為我們接下來就要改變contain屬性，觀察它所發生的變化。

通過尺寸來控制

<div style="contain: size;background-color: bisque;">
  我是父元素
  <div style="background-color: coral;">
    我是子元素
  </div>
</div>
<div style="background-color: lightpink;">
  我是父兄弟元素
</div>

給父元素加上contain:size樣式：

效果

可以看到，"我是父元素"和"我是父兄弟元素"重合了，也就說，父兄弟元素的渲染，直接從父元素渲染開始的位置開始渲染的。就好像父元素不存在一樣。

這里面的奧妙通過控制臺看一下，其實就很容易解開了：

效果

就是因為父元素的高度為0了。在解釋之前先說明一下，行向指的是我們書寫的方向，就是指的從左往右，你就可以理解成是多個行內元素排列的方向，一直往后面追加的方向。塊向指的是我們折行的方向，也就是指的從上往下，你就可以理解成是多個塊級元素排列的方向，一直往下追加的方向。

理解了這兩個之后，我們就知道，由于size影響著這兩個方向上的局限，它會變得無視子元素。因為如果沒有主動設置尺寸的話，就好像子元素不存在一樣，那么它就沒有高度，所以兄弟元素就自然而然的頂上來了。

這時，我們改一下設置，讓它只在行向上有局限：

<div style="contain: inline-size;background-color: bisque;">
  我是父元素
  <div style="background-color: coral;">
    我是子元素
  </div>
</div>
<div style="background-color: lightpink;">
  我是父兄弟元素
</div>

通過設置contain:inline-size：

效果

可以看到，效果又回來了，這是因為我們沒有在塊向上做局限，因此高度會自然撐開。

既然說到了這里，我們再看一下，它是如何在行向上進行局限的，構造如下代碼：

<div style="contain: inline-size;display: inline-block;background-color: bisque;">
  我是父元素
  <div style="background-color: coral;">
    我是子元素
  </div>
</div>
<div style="background-color: lightpink;">
  我是父兄弟元素
</div>

設置父元素為行內塊，增加display:inline-block：

效果

瞬間又變成了這樣，這同樣是因為，行內局限使得父元素獨立計算尺寸，而我們又沒手動指定，因此它的寬度為0，子元素也跟著寬度為0，所以就變成了一個字一換行。

這時即使你給子元素加上寬度，在行向上父元素也會無視你：

效果

你看我們給子元素加上100px的寬度，但是鼠標查看父元素，依然是寬度為0。

通過布局來控制

指定contain:layout，可以讓該元素獨立計算它的內部布局，不受外界影響，我們先將子元素設定一個固定定位：

<div style="background-color: bisque;">
  我是父元素
  <div style="position: fixed;top: 10px;background-color: coral;">
    我是子元素
  </div>
</div>
<div style="background-color: lightpink;">
  我是父兄弟元素
</div>

看下現在的效果：

效果

完全沒毛病，子元素固定到頁面頂部的10px位置。

現在應用一下我們的布局限制：

<div style="contain: layout;background-color: bisque;">
  我是父元素
  <div style="position: fixed;top: 10px;background-color: coral;">
    我是子元素
  </div>
</div>
<div style="background-color: lightpink;">
  我是父兄弟元素
</div>

再看下顯示的效果：

效果

咦？明明是固定定位，它的位置卻是相對于父元素的。這就是布局限制的作用，相當于父元素告訴頁面，從現在開始，這片的布局歸我管，所有的行為都向我請示，由我指揮。

同樣，其他的position值，也都是基于父元素的布局限制來渲染的，這里就不做一一演示了。

其實，不光是position，只要是關于布局的，都會在此局限下生效，這里再演示一個浮動的例子：

<div style="height: 80px;padding: 5px;background-color: bisque;">
  <h2 style="margin-bottom: 7px;">我是父元素</h2>
  <p style="float: left;background-color: coral;">
    我是子元素
  </p>
</div>
<div style="height: 80px;padding: 5px;background-color: lightpink;">
  <h2>我是父兄弟元素</h2>
  <p style="background-color: coral;">
    我是父兄弟子元素
  </p>
</div>

兩個父元素各包含兩個子元素，其中第一個父元素的第二個子元素設置為左浮動，為了更好的演示，我把子元素改成了h2和p標簽，看下現在的效果：

效果

父元素的兩個子元素正常顯示，但是父兄弟元素的第一個子元素里面的文字，被擠的偏移了，這是由于父元素的第二個子元素設置浮動引起的，通過控制臺看下就明白了：

效果

紅線是我標出來的，可以看到，父兄弟元素的h2和父元素的浮動有一丁點的重合，導致文字被推開，這就是浮動產生的影響。

我們通過布局局限，來控制浮動只發生在局限內，稍微改下代碼：

<div style="contain: layout;height: 80px;padding: 5px;background-color: bisque;">
  <h2 style="margin-bottom: 7px;">我是父元素</h2>
  <p style="float: left;background-color: coral;">
    我是子元素
  </p>
</div>
<div style="height: 80px;padding: 5px;background-color: lightpink;">
  <h2>我是父兄弟元素</h2>
  <p style="background-color: coral;">
    我是父兄弟子元素
  </p>
</div>

給父元素添加了contain:layout，這是浮動就不會影響后面的布局了：

效果

通過布局局限，我們可以把所有的關于布局的影響，都控制在容器內，這樣即使容器內布局發生了改變，也完全不會影響頁面其他內容，在動態頁面中，如果需要頻繁的修改某些元素，通過這種方式管理和設計頁面，就能很有效的改善渲染的性能。

通過樣式來控制

這里的樣式主要是針對計數器和引號的作用域，能控制它們只在所局限的范圍內單獨計算，而不會影響全局的結果，就好像它們是單獨拿出來作為一個獨立的文檔一樣，看個例子：

body {
  counter-reset: my-list;
}
div > div::before {
  counter-increment: my-list;
  content: "（" counter(my-list) "）：";
}
<div>
  <div>第1行</div>
  <div>第2行</div>
  <div>第3行</div>
  <div>第4行</div>
  <div>第5行</div>
  <div>第6行</div>
</div>

我們設計這樣一個列表，通過自定義的計數器，設置一個前綴的顯示：

效果

如果我們希望第三行獨立出來，進行樣式局限，不參與外部計數：

<div>
  <div>第1行</div>
  <div>第2行</div>
  <div style="contain: style;">第3行</div>
  <div>第4行</div>
  <div>第5行</div>
  <div>第6行</div>
</div>

那么它就會展現成這個樣子：

效果

注意第三行的計數，已經重置為1，并且第四行從3開始，接著第二行的值繼續計數。

通過繪制來控制

這個也比較厲害，就是父元素啥樣就是啥樣，子元素永遠不會在容器外渲染：

<div style="background-color: bisque;width: 100px;height: 100px;">
  <div>
  海客談瀛洲，煙濤微茫信難求。
  越人語天姥，云霞明滅或可睹。
  天姥連天向天橫，勢拔五岳掩赤城。
    </div>
</div>

有這樣一個代碼塊，容器的寬高為100px，內容有超出部分：

效果

我們可以通過繪制局限來使容器外的內容不顯示：

<div style="contain: style;background-color: bisque;width: 100px;height: 100px;">
  <div>
  海客談瀛洲，煙濤微茫信難求。
  越人語天姥，云霞明滅或可睹。
  天姥連天向天橫，勢拔五岳掩赤城。
  </div>
</div>

添加contain:paint，只讓繪制區域被限制在容器內部：

效果

這個跟overflow:hidden有一點區別，就是繪制局限真的就是正常繪制，只不過不繪制容器外的部分，而hidden雖然隱藏，但是依然能通過js進行滾動。

通過組合值來控制

我們也可以通過任意的值的組合來控制所需要的局限，也可以通過strict或content關鍵字來快速的做到這一點。這里就不再重復演示了

最后

合理的使用contain，不但能快速實現我們的需求，也能減少我們的修改量，而且會降低不理解現象的情況的出現頻率，更能提升頁面的性能。

尤其是布局局限，提供給了我們更多的發揮空間，而且任意的復制到其他地方，也不會對外部元素有影響。

每天一點小知識，希望能夠幫助到你。

在線咨詢

上一篇：「.NET 與樹莓派」讓喇叭播放音樂
下一篇：移動端H5自動播放視頻

您的項目需求

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

整合營銷服務商