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>是指陰影的垂直偏移量，其值也可以是正或負(fù)值，如果為正值，陰影在對象的底部，反之其值為負(fù)值時，陰影在對象的頂部；
陰影模糊半徑.................................................
</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>是指陰影的垂直偏移量，其值也可以是正或負(fù)值，如果為正值，陰影在對象的底部，反之其值為負(fù)值時，陰影在對象的頂部；
陰影模糊半徑......
</p>
</body>
</html>

注意: 目前只在webkit內(nèi)核瀏覽器(Chrome、Safari、移動端瀏覽器)中生效

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

1、內(nèi)容可編輯屬性

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

<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、詳情標(biāo)簽（Details）

<details> 標(biāo)簽向用戶提供按需詳細(xì)信息。默認(rèn)情況下，小部件是折疊的。打開時，它會展開并顯示其中的內(nèi)容。

<summary> 標(biāo)簽與 <details> 一起使用實(shí)現(xiàn)一個可以折疊打開標(biāo)題及詳情內(nèi)容。

<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 標(biāo)簽

<datalist> 標(biāo)記指定預(yù)定義選項(xiàng)列表并提供自動完成功能。

<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 標(biāo)簽

<meter> 標(biāo)簽定義了定義范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值

<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 標(biāo)簽

<progress> 標(biāo)簽表示任務(wù)的進(jìn)度。

<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、標(biāo)記內(nèi)容標(biāo)簽

使用 <mark> 標(biāo)記突出顯示任何文本內(nèi)容。

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

9、塊引用和引用

如果您要包含來自不同來源的內(nèi)容，您絕對應(yīng)該引用該來源。

<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、縮寫標(biāo)簽（Abbreviation）

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

<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>

實(shí)際上有一個標(biāo)記用于帶刪除線的文本，另一個標(biāo)記表示替換文本。

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

12、Output 標(biāo)簽

<output> 標(biāo)簽表示計算的結(jié)果。通常，此元素定義一個區(qū)域，該區(qū)域?qū)⒂糜陲@示某些計算的文本輸出。

<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 文件中。每一個都有自己的用例，適用于不同的布局。另一個與它們類似的選項(xiàng)是隱藏的 HTML 屬性。如果一個元素在其上指定了隱藏，它將被隱藏。我碰巧有用于存儲值的隱藏輸入，所以如果您也需要它，請不要吃驚。

<div hidden>...</div>

14、Time 標(biāo)簽

<time> 標(biāo)記定義特定時間（或日期時間）。

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

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

15、Audio 標(biāo)簽

<audio> 標(biāo)簽將定義一種聲音，該標(biāo)簽可以與三個支持的文件一起使用。它們是 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>

結(jié)束

好了，今天的分享就到這里，通過本文的學(xué)習(xí)，你可以輕松的使用HTML原生標(biāo)簽?zāi)芰?，就能夠?qū)崿F(xiàn)以前復(fù)雜的第三方UI組件提供的功能。感謝你的閱讀，如果你喜歡我的分享，別忘了點(diǎn)贊轉(zhuǎn)發(fā)，讓更多的人看到，最后別忘記點(diǎn)個關(guān)注，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內(nèi)容，敬請期待。

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

SS的布局有太多種方式，元素的表現(xiàn)也有很多的形式。

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

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

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

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

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

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

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

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

contain概述

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

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

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

示例

我們來對上面所說的內(nèi)容，做一些示例，來看看它們的實(shí)際工作方式。

先構(gòu)建一個基本的代碼，之后都以這個為基礎(chǔ)改造和演示：

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

看下現(xiàn)在的效果：

效果

記住這個效果，因?yàn)槲覀兘酉聛砭鸵淖僣ontain屬性，觀察它所發(fā)生的變化。

通過尺寸來控制

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

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

效果

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

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

效果

就是因?yàn)楦冈氐母叨葹?了。在解釋之前先說明一下，行向指的是我們書寫的方向，就是指的從左往右，你就可以理解成是多個行內(nèi)元素排列的方向，一直往后面追加的方向。塊向指的是我們折行的方向，也就是指的從上往下，你就可以理解成是多個塊級元素排列的方向，一直往下追加的方向。

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

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

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

通過設(shè)置contain:inline-size：

效果

可以看到，效果又回來了，這是因?yàn)槲覀儧]有在塊向上做局限，因此高度會自然撐開。

既然說到了這里，我們再看一下，它是如何在行向上進(jìn)行局限的，構(gòu)造如下代碼：

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

設(shè)置父元素為行內(nèi)塊，增加display:inline-block：

效果

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

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

效果

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

通過布局來控制

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

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

看下現(xiàn)在的效果：

效果

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

現(xiàn)在應(yīng)用一下我們的布局限制：

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

再看下顯示的效果：

效果

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

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

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

<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>

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

效果

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

效果

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

我們通過布局局限，來控制浮動只發(fā)生在局限內(nèi)，稍微改下代碼：

<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，這是浮動就不會影響后面的布局了：

效果

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

通過樣式來控制

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

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>

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

效果

如果我們希望第三行獨(dú)立出來，進(jìn)行樣式局限，不參與外部計數(shù)：

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

那么它就會展現(xiàn)成這個樣子：

效果

注意第三行的計數(shù)，已經(jīng)重置為1，并且第四行從3開始，接著第二行的值繼續(xù)計數(shù)。

通過繪制來控制

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

<div style="background-color: bisque;width: 100px;height: 100px;">
  <div>
  ?？驼勫蓿瑹煗⒚Ｐ烹y求。
  越人語天姥，云霞明滅或可睹。
  天姥連天向天橫，勢拔五岳掩赤城。
    </div>
</div>

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

效果

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

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

添加contain:paint，只讓繪制區(qū)域被限制在容器內(nèi)部：

效果

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

通過組合值來控制

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

最后

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

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

每天一點(diǎn)小知識，希望能夠幫助到你。

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS 文本超出隱藏

1、內(nèi)容可編輯屬性

2、詳情標(biāo)簽（Details）

3、Datalist 標(biāo)簽

4、Range 屬性

5、Meter 標(biāo)簽

6、 Progress 標(biāo)簽

7、顏色選擇器

8、標(biāo)記內(nèi)容標(biāo)簽

9、塊引用和引用

10、縮寫標(biāo)簽（Abbreviation）

11、<del> and <ins>

12、Output 標(biāo)簽

13、Hidden 屬性

14、Time 標(biāo)簽

15、Audio 標(biāo)簽

結(jié)束

contain概述

分類

示例

最后

您的項(xiàng)目需求

整合營銷服務(wù)商

CSS 文本超出隱藏

1、內(nèi)容可編輯屬性

2、詳情標(biāo)簽（Details）

3、Datalist 標(biāo)簽

4、Range 屬性

5、Meter 標(biāo)簽

6、 Progress 標(biāo)簽

7、顏色選擇器

8、標(biāo)記內(nèi)容標(biāo)簽

9、塊引用和引用

10、縮寫標(biāo)簽（Abbreviation）

11、<del> and <ins>

12、Output 標(biāo)簽

13、Hidden 屬性

14、Time 標(biāo)簽

15、Audio 標(biāo)簽

結(jié)束

contain概述

分類

示例

最后

您的項(xiàng)目需求

1、內(nèi)容可編輯屬性

2、詳情標(biāo)簽（Details）

5、Meter 標(biāo)簽

7、顏色選擇器

9、塊引用和引用

11、<del> and <ins>

12、Output 標(biāo)簽

14、Time 標(biāo)簽

15、Audio 標(biāo)簽