一個(gè)新的 HTML 元素：！

hrome 126 于近期發(fā)布了穩(wěn)定版本，其中一個(gè)比較有意思的更新是給 HTML 帶來(lái)一個(gè)新的元素：<permission> ，它將從這個(gè)版本開始試用，并且正在努力走向標(biāo)準(zhǔn)化。

今天我們一起來(lái)看下這個(gè) <permission> 元素的用法。

Web 權(quán)限提示的問題

當(dāng) Web 應(yīng)用程序需要訪問瀏覽器的高級(jí)功能時(shí)，需要向用戶主動(dòng)請(qǐng)求許可。例如，當(dāng)百度地圖使用 Geolocation API 獲取用戶的地理位置時(shí)，瀏覽器會(huì)提示用戶申請(qǐng)權(quán)限，這是權(quán)限規(guī)范中定義明確的概念。

申請(qǐng)權(quán)限的觸發(fā)方式一般分為兩類，被動(dòng)隱式觸發(fā)，或者主動(dòng)顯示觸發(fā)：

例如，Geolocation API 是一個(gè)強(qiáng)大的 API，它的使用依賴于首次使用時(shí)隱式詢問的方法。例如，當(dāng)程序調(diào)用 navigator.geolocation.getCurrentPosition() 方法時(shí)，權(quán)限提示框會(huì)在第一次調(diào)用時(shí)自動(dòng)彈出，還有另外一個(gè)例子是 navigator.mediaDevices.getUserMedia()。

一些其他的 API，如 Notification API 或 Device Orientation API，通常有一種顯式的方式通過靜態(tài)方法來(lái)請(qǐng)求權(quán)限，如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

網(wǎng)站可以在加載時(shí)立即調(diào)用諸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。這會(huì)導(dǎo)致在用戶還沒與網(wǎng)站進(jìn)行交互時(shí)就彈出權(quán)限提示。這就是明顯的權(quán)限濫用行為，并且影響到兩種方式，既包括首次使用時(shí)的隱含詢問，也包括提前明確請(qǐng)求。

權(quán)限濫用導(dǎo)致瀏覽器廠商要求有像點(diǎn)擊按鈕或按下按鍵這樣的用戶操作，然后才會(huì)顯示權(quán)限提示。這種方法的問題在于，瀏覽器很難確定某個(gè)特定的用戶操作是否應(yīng)該導(dǎo)致顯示權(quán)限提示。也許用戶只是因?yàn)轫?yè)面加載時(shí)間太長(zhǎng)而在頁(yè)面上隨意某個(gè)地方隨便點(diǎn)擊，有些網(wǎng)站也變得非常擅長(zhǎng)誘騙用戶點(diǎn)擊內(nèi)容來(lái)觸發(fā)提示。

另一個(gè)問題是權(quán)限提示框通常顯示的方式：在網(wǎng)站的 “死亡線” 之上（特別是在大屏幕上），也就是說(shuō)，在應(yīng)用程序能夠繪制到的瀏覽器窗口區(qū)域之外。用戶在剛剛點(diǎn)擊了窗口底部的一個(gè)按鈕后，可能會(huì)錯(cuò)過瀏覽器窗口頂部的提示，這種情況還是挺常見的。當(dāng)瀏覽器有應(yīng)對(duì)權(quán)限濫用的緩解措施時(shí)，這個(gè)問題往往會(huì)更加嚴(yán)重。

另外，用戶一旦做出了拒絕某個(gè)權(quán)限的操作，之后想要改變就不太容易了。他們得找到特定的地方，比如那個(gè)網(wǎng)站信息下拉菜單，然后去進(jìn)行重置或調(diào)整權(quán)限的操作，而且還得重新加載頁(yè)面才行。網(wǎng)站也沒辦法提供很方便的途徑讓用戶快速改變權(quán)限狀態(tài)，還得詳細(xì)地告訴用戶怎么去找到地方改變?cè)O(shè)置。

如果某個(gè)權(quán)限是非常重要的，比如視頻會(huì)議軟件要用麥克風(fēng)權(quán)限，那像谷歌會(huì)議這類的軟件就會(huì)彈出很顯眼的對(duì)話框來(lái)告訴用戶怎么去把之前阻止的權(quán)限給開通。

<permission>元素

為了解決上面的這些問題，<permission> 元素誕生了。這個(gè)元素允許開發(fā)者以聲明方式請(qǐng)求使用權(quán)限，如下例所示：

<permission type="camera" />

“type” 屬性代表你正在請(qǐng)求的權(quán)限列表（如果有多個(gè)可以以空格分割）。目前，允許的值是 'camera'，'microphone' 以及 'camera microphone'。默認(rèn)情況下，這個(gè)元素呈現(xiàn)出來(lái)的樣子類似于具有最簡(jiǎn)用戶代理樣式的按鈕。

對(duì)于某些允許附加參數(shù)的權(quán)限，type-ext 屬性接受以空格分隔的鍵值對(duì)，例如 precise:true 地理位置權(quán)限。

當(dāng)用戶與 <permission> 元素交互時(shí)，他們可以循環(huán)經(jīng)歷各個(gè)階段：

如果他們之前不允許某項(xiàng)功能，他們可以在每次訪問時(shí)允許該功能，或者在當(dāng)前訪問時(shí)允許該功能。

如果他們之前允許該功能，他們可以繼續(xù)允許，或者停止允許。

如果他們之前不允許某項(xiàng)功能，他們可以繼續(xù)不允許它，或者這次允許它。

<permission> 元素的文本會(huì)根據(jù)狀態(tài)自動(dòng)更新。例如，如果已授予使用某項(xiàng)功能的權(quán)限，則文本會(huì)更改為表示允許使用該功能。如果需要先授予權(quán)限，則文本會(huì)更改為邀請(qǐng)用戶使用該功能。將之前的屏幕截圖與以下屏幕截圖進(jìn)行比較，以查看這兩種狀態(tài)。

<permission> 元素可以與 Permissions API 一起使用。有許多事件可供監(jiān)聽：

onpromptdismiss：當(dāng)元素觸發(fā)的權(quán)限提示被用戶關(guān)閉（例如，單擊關(guān)閉按鈕或單擊提示之外）時(shí)，會(huì)觸發(fā)此事件。
onpromptaction：當(dāng)元素觸發(fā)的權(quán)限提示已被用戶對(duì)提示本身采取某種操作解決時(shí)，觸發(fā)此事件。這并不一定意味著權(quán)限狀態(tài)已經(jīng)改變，用戶可能已經(jīng)采取了維持現(xiàn)狀的操作（例如繼續(xù)允許權(quán)限）。
onvalidationstatuschange：當(dāng)元素從 "valid" 切換到 "invalid" 時(shí)觸發(fā)此事件，例如當(dāng)元素被其他超文本標(biāo)記語(yǔ)言內(nèi)容部分遮擋時(shí)，會(huì)認(rèn)為是 "invalid"。

我們可以直接在 HTML 代碼中內(nèi)聯(lián)注冊(cè)這些事件的事件監(jiān)聽器（<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />），或者在 <permission> 元素上使用 addEventListener()：

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
    // Run the initial check.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });
</script>

最后

參考：https://developer.chrome.com/blog/permission-element-origin-trial

滿足以下2個(gè)條件時(shí)；

瀏覽器會(huì)自動(dòng)記錄輸入過的值；

當(dāng)用戶再次輸入的時(shí)候就能自動(dòng)完成；

1：input標(biāo)簽在form標(biāo)簽下；

2：點(diǎn)擊了此form標(biāo)簽下的submit按鈕；

具體的表現(xiàn)形式如下圖；

瀏覽器自動(dòng)顯示輸入過的值后會(huì)遮擋到下面的驗(yàn)證碼；

對(duì)于我這種記性差到即便只有這4個(gè)數(shù)字都懶得記；

非要邊看著驗(yàn)證碼邊輸入的人是無(wú)法忍受的；

額；好吧；我承認(rèn)記性是躺槍的；主要是懶；

如果說(shuō)驗(yàn)證碼這個(gè)示例你能忍受的話；

那么下面這張圖肯定是無(wú)法忍的了；

這個(gè)搜索框有一個(gè)ajax 事件了；

當(dāng)輸入內(nèi)容后會(huì)發(fā)送異步請(qǐng)求搜索商品；

但是瀏覽器的自動(dòng)顯示的輸入記錄就會(huì)遮擋后邊的搜索結(jié)果；

解決這個(gè)情況的方法是為input標(biāo)簽添加autocomplete屬性并設(shè)為off

<input class="text" autocomplete="off" type="text" name="word" value="輸入商品名稱">

順便介紹下autocomplete；

autocomplete是HTML5 中的新屬性它規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能。自動(dòng)完成允許瀏覽器預(yù)測(cè)對(duì)字段的輸入。當(dāng)用戶在字段開始鍵入時(shí)，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項(xiàng)。

值描述

on默認(rèn)。規(guī)定啟用自動(dòng)完成功能。
off規(guī)定禁用自動(dòng)完成功能。

行文本展開收起是一個(gè)很常見的交互，如下圖演示

實(shí)現(xiàn)這一類布局和交互難點(diǎn)主要有以下幾點(diǎn)

位于多行文本右下角的“展開收起”按鈕
“展開”和“收起”兩種狀態(tài)的切換
當(dāng)文本不超過指定行數(shù)時(shí)，不顯示“展開收起”按鈕

說(shuō)實(shí)話，之前單獨(dú)看這個(gè)布局，即使借助 JavaScript 也不是一件容易的事?。ㄐ枰?jì)算文字寬度動(dòng)態(tài)截取文本，vue-clamp 就是這么做的），更別說(shuō)下面的交互和判斷邏輯了，不過經(jīng)過我的一番琢磨，其實(shí)純 CSS 也能完美實(shí)現(xiàn)的，下面就一步一步來(lái)看看如何實(shí)現(xiàn)吧~

一、位于右下角的“展開收起”按鈕

很多設(shè)計(jì)同學(xué)都喜歡這樣的設(shè)計(jì)，把按鈕放在右下角，和文本混合在一起，而不是單獨(dú)一行，視覺上可能更加舒適美觀。先看看多行文本截?cái)喟桑@個(gè)比較簡(jiǎn)單

多行文本截?cái)?/span>

假設(shè)有這樣一個(gè) html 結(jié)構(gòu)

<div class="text">
  浮動(dòng)元素是如何定位的
正如我們前面提到的那樣，當(dāng)一個(gè)元素浮動(dòng)之后，它會(huì)被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個(gè)浮動(dòng)的元素。
</div>

多行文本超出省略大家應(yīng)該很熟悉這個(gè)了吧，主要用到用到 line-clamp ，關(guān)鍵樣式如下

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

右下角環(huán)繞效果

提到文本環(huán)繞效果，一般能想到 浮動(dòng) float ，沒錯(cuò)，千萬(wàn)不要以為浮動(dòng)已經(jīng)是過去式了，具體的場(chǎng)景還是很有用的。比如下面放一個(gè)按鈕，然后設(shè)置浮動(dòng)

<div class="text">
  <button class="btn">展開</button>
  浮動(dòng)元素是如何定位的
正如我們前面提到的那樣，當(dāng)一個(gè)元素浮動(dòng)之后，它會(huì)被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個(gè)浮動(dòng)的元素。
</div>

.btn {
  float: left;
  /*其他裝飾樣式*/
}

如果設(shè)置右浮動(dòng)

.btn {
  float: right;
  /*其他裝飾樣式*/
}

這時(shí)已經(jīng)有了環(huán)繞的效果了，只是位于右上角，如何將按鈕移到右下角呢？先嘗試一下 margin

.btn {
  float: right;
  margin-top: 50px;
  /*其他裝飾樣式*/
}

可以看到，雖然按鈕到了右下角，但是文本卻沒有環(huán)繞按鈕上方的空間，空出了一大截，無(wú)能為力了嗎？

雖然 margin 不能解決問題，但是整個(gè)文本還是受到了浮動(dòng)按鈕的影響，如果有多個(gè)浮動(dòng)元素會(huì)怎么樣呢？這里用偽元素來(lái) ::before 代替

.text::before{
  content: '';
  float: right;
  width: 10px;
  height: 50px;/*先隨便設(shè)置一個(gè)高度*/
  background: red
}

現(xiàn)在按鈕到了偽元素的左側(cè)，如何移到下面呢？很簡(jiǎn)單，清除一下浮動(dòng) clear: both; 就可以了

.btn {
  float: right;
  clear: both;
  /*其他裝飾樣式*/
}

可以看到，現(xiàn)在文本是完全環(huán)繞在右側(cè)的兩個(gè)浮動(dòng)元素了，只要把紅色背景的偽元素寬度設(shè)置為0（或者不設(shè)置寬度，默認(rèn)就是 0），就實(shí)現(xiàn)了右下角環(huán)繞的效果

.text::before{
  content: '';
  float: right;
  width: 0; /*設(shè)置為0，或者不設(shè)置寬度*/
  height: 50px;/*先隨便設(shè)置一個(gè)高度*/
}

動(dòng)態(tài)高度

上面雖然完成了右下加環(huán)繞，但是高度是固定的，如何動(dòng)態(tài)設(shè)置呢？這里可以用到 calc 計(jì)算，用整個(gè)容器高度減去按鈕的高度即可，如下

.text::before{
  content: '';
  float: right;
  width: 0;
  height: calc(100% - 24px);
}

很可惜，好像并沒有什么效果，打開控制臺(tái)看看，結(jié)果發(fā)現(xiàn) calc(100% - 24px) 計(jì)算高度為 0

原因其實(shí)很容易想到，就是 高度 100% 失效 的問題，關(guān)于這類問題網(wǎng)上的分析有很多，通常的解決方式是給父級(jí)指定一個(gè)高度，但是這里的高度是動(dòng)態(tài)變化的，而且還有展開狀態(tài)，高度更是不可預(yù)知，所以設(shè)置高度不可取。

除此之外，其實(shí)還有另一種方式，那就是利用 flex 布局。大概的方法就是在 flex 布局的子項(xiàng)中，可以通過百分比來(lái)計(jì)算變化高度，具體可參考 w3.org 中關(guān)于 css-flexbox 的描述

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

因此，這里需要給 .text 包裹一層，然后設(shè)置 display: flex

<div class="wrap">
  <div class="text">
    <button class="btn">展開</button>
    浮動(dòng)元素是如何定位的
  正如我們前面提到的那樣，當(dāng)一個(gè)元素浮動(dòng)之后，它會(huì)被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個(gè)浮動(dòng)的元素。
  </div>
</div>

.wrap{
  display: flex;
}

實(shí)踐下來(lái)，display: grid 和 display: -webkit-box 同樣有效，原理類似

這樣下來(lái)，剛才的計(jì)算高度就生效了，改變文本的行數(shù)，同樣位于右下角~

除此之外，動(dòng)態(tài)高度也可以采用負(fù)的 margin 來(lái)實(shí)現(xiàn)（性能會(huì)比 calc 略好一點(diǎn)）

.text::before{
  content: '';
  float: right;
  width: 0;
  /*height: calc(100% - 24px);*/
  height: 100%;
  margin-bottom: -24px;
}

到這里，右下角環(huán)繞的效果就基本完成，省略號(hào)也是位于展開按鈕之前的，完整代碼可以查看 codepen 右下角多行展開環(huán)繞效果

4.其他瀏覽器的兼容處理

上面的實(shí)現(xiàn)是最完美的處理方式。原本以為兼容性沒什么大問題的，畢竟只用到了文本截?cái)嗪透?dòng)，-webkit-line-clamp 雖然是 -webkit- 前綴，不過 firefox 也是支持的，打開一看傻了眼，safari 和 firefox 居然全亂了！

這就有點(diǎn)難受了，前面那么多努力都白費(fèi)了嗎？不可能不管這兩個(gè)，不然就只能是 demo 了，無(wú)法用于生產(chǎn)環(huán)境。

趕緊打開控制臺(tái)看看是什么原因。一番查找，結(jié)果發(fā)現(xiàn)是 display: -webkit-box ！設(shè)置該屬性后，原本的文本好像變成了一整塊，浮動(dòng)元素也無(wú)法產(chǎn)生環(huán)繞效果，去掉之后浮動(dòng)就正常了

那么問題來(lái)了：沒有 display: -webkit-box 怎么實(shí)現(xiàn)多行截?cái)嗄?？

其實(shí)上面的努力已經(jīng)實(shí)現(xiàn)了右下角環(huán)繞的效果，如果在知道行數(shù)的情況下設(shè)置一個(gè)最大高度，是不是也完成了多行截?cái)嗄?？為了便于設(shè)置高度，可以添加一個(gè)行高 line-height，如果需要設(shè)置成3行，那高度就設(shè)置成 line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

為了方便更好的控制行數(shù)，這里可以把常用的行數(shù)通過屬性選擇器獨(dú)立出來(lái)（通常不會(huì)太多），如下

[line-clamp="1"] {
  max-height: 1.5em;
}
[line-clamp="2"] {
  max-height: 3em;
}
[line-clamp="3"] {
  max-height: 4.5em;
}
...

<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
 ...
</div>

可以看到基本上正常了，除了沒有省略號(hào)，現(xiàn)在加上省略號(hào)吧，跟在展開按鈕之前就可以了，可以用偽元素實(shí)現(xiàn)

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

這樣，Safari 和 Firefox 的兼容布局基本上就完成了，完整代碼可以查看 codepen 右下角多行展開環(huán)繞效果（全兼容）

二、“展開”和“收起”兩種狀態(tài)

提到 CSS 狀態(tài)切換，大家都能想到 input type="checkbox" 吧。這里我們也需要用到這個(gè)特性，首先加一個(gè) input ，然后把之前的 button 換成 label ，并且通過 for 屬性關(guān)聯(lián)起來(lái)

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展開</label>
    浮動(dòng)元素是如何定位的
  正如我們前面提到的那樣，當(dāng)一個(gè)元素浮動(dòng)之后，它會(huì)被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個(gè)浮動(dòng)的元素。
  </div>
</div>

這樣，在點(diǎn)擊 label 的時(shí)候，實(shí)際上是點(diǎn)擊了 input 元素，現(xiàn)在來(lái)添加兩種狀態(tài)，分別是只顯示 3 行和不做行數(shù)限制

.exp:checked+.text{
  -webkit-line-clamp: 999; /*設(shè)置一個(gè)足夠大的行數(shù)就可以了*/
}

兼容版本可以直接設(shè)置最大高度 max-height 為一個(gè)較大的值，或者直接設(shè)置為 none

.exp:checked+.text{
  max-height: none;
}

這里還有一個(gè)小問題，“展開”按鈕在點(diǎn)擊后應(yīng)該變成“收起”，如何修改呢？

有一個(gè)技巧，凡是碰到需要?jiǎng)討B(tài)修改內(nèi)容的，都可以使用偽類 content 生成技術(shù)，具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

<label class="btn" for="exp"></label><!--去除按鈕文字-->

.btn::after{
  content:'展開' /*采用content生成*/
}

添加 :checked 狀態(tài)

.exp:checked+.text .btn::after{
  content:'收起'
}

兼容版本由于前面的省略號(hào)是模擬出來(lái)的，不能自動(dòng)隱藏，所以需要額外來(lái)處理

.exp:checked+.text .btn::before {
    visibility: hidden; /*在展開狀態(tài)下隱藏省略號(hào)*/
}

基本和本文開頭的效果一致了，完整代碼可以查看 codepen 多行展開收起交互，兼容版本可以查看 codepen 多行展開收起交互（全兼容）

還有一點(diǎn)，如果給 max-height 設(shè)置一個(gè)合適的值，注意，是合適的值，具體原理可以參考CSS 奇技淫巧：動(dòng)態(tài)高度過渡動(dòng)畫，還能加上過渡動(dòng)畫

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就可以了*/
}

三、文本行數(shù)的判斷

上面的交互已經(jīng)基本滿足要求了，但是還是會(huì)有問題。比如當(dāng)文本較少時(shí)，此時(shí)是沒有發(fā)生截?cái)啵簿褪菦]有省略號(hào)的，但是“展開”按鈕卻仍然位于右下角，如何隱藏呢？

通常 js 的解決方式很容易，比較一下元素的 scrollHeight 和 clientHeight 即可，然后添加相對(duì)應(yīng)的類名。下面是偽代碼

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk')
}

那么，CSS 如何實(shí)現(xiàn)這類判斷呢？

可以肯定的是，CSS 是沒有這類邏輯判斷，大多數(shù)我們都需要從別的角度，采用 “障眼法”來(lái)實(shí)現(xiàn)。比如在這個(gè)場(chǎng)景，當(dāng)沒有發(fā)生截?cái)嗟臅r(shí)候，表示文本完全可見了，這時(shí)，如果在文本末尾添加一個(gè)元素（紅色小方塊），為了不影響原有布局，這里設(shè)置了絕對(duì)定位

.text::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: red;
}

可以看到，這里的紅色小方塊是完全跟隨省略號(hào)的。當(dāng)省略號(hào)出現(xiàn)時(shí)，紅色小方塊必定消失，因?yàn)橐呀?jīng)被擠下去了，這里把父級(jí) overflow: hidden 暫時(shí)隱藏就能看到是什么原理了

然后，可以把剛才這個(gè)紅色的小方塊設(shè)置一個(gè)足夠大的尺寸，并且降低透明度，比如 100% * 100%

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}

可以看到，紅色的塊塊把右下角的都覆蓋了，現(xiàn)在把背景改為白色（和父級(jí)同底色），父級(jí) overflow: hidden 重新加上

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
}

現(xiàn)在看看點(diǎn)擊展開的效果吧

現(xiàn)在展開以后，發(fā)現(xiàn)按鈕不見（被剛才那個(gè)偽元素所覆蓋，并且也點(diǎn)擊不了），如果希望點(diǎn)擊以后仍然可見呢？添加一下 :checked 狀態(tài)即可，在展開時(shí)隱藏覆蓋層

.exp:checked+.text::after{
    visibility: hidden;
}

這樣，就實(shí)現(xiàn)了在文字較少的情況下隱藏展開按鈕的功能

最終完整代碼可以查看 codepen 多行展開收起自動(dòng)隱藏，兼容版本可以查看 codepen 多行展開收起自動(dòng)隱藏（全兼容）

需要注意的是，兼容版本可以支持到 IE 10+（這就過分了啊，居然還支持 IE），但是由于 IE 不支持 codepen，所以測(cè)試 IE 可以自行復(fù)制在本地測(cè)試。

四、總結(jié)和說(shuō)明

總的來(lái)說(shuō)，重點(diǎn)還是在布局方面，交互其實(shí)相對(duì)容易，整體實(shí)現(xiàn)的成本其實(shí)是很低的，也沒有比較生僻的屬性，除了布局方面 -webkit-box 貌似有點(diǎn) bug （畢竟是-webkit-內(nèi)核，火狐只是借鑒了過來(lái)，難免有些問題），幸運(yùn)的是可以通過另一種方式實(shí)現(xiàn)多行文本截?cái)嘈Ч嫒菪韵喈?dāng)不錯(cuò)，基本上全兼容（IE10+），這里整理一下實(shí)現(xiàn)重點(diǎn)

文本環(huán)繞效果首先考慮 浮動(dòng) float
flex 布局子元素可以通過百分比計(jì)算高度
多行文本截?cái)噙€可以結(jié)合文本環(huán)繞效果用 max-height 模擬實(shí)現(xiàn)
狀態(tài)切換可以借助 checkbox
CSS 改變文本可以采用偽元素生成
多利用 CSS 遮擋“障眼法”

多行文本展開收起效果可以說(shuō)是業(yè)界一個(gè)老大難的問題了，有很多 js 解決方案，但是感覺都不是很完美，希望這個(gè)全新思路的 CSS 解決方式能給各位帶來(lái)不一樣的啟發(fā)，感謝閱讀，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)～

References

[1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh
[2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch
[3] codepen 右下角多行展開環(huán)繞效果: https://codepen.io/xboxyan/pen/ExWaBJO
[4] codepen 右下角多行展開環(huán)繞效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr
[5] codepen 多行展開收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ
[6] codepen 多行展開收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR
[7] CSS 奇技淫巧：動(dòng)態(tài)高度過渡動(dòng)畫: https://github.com/chokcoco/iCSS/issues/91
[8] codepen 多行展開收起自動(dòng)隱藏: https://codepen.io/xboxyan/pen/eYvNvYK
[9] codepen 多行展開收起自動(dòng)隱藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK

在線咨詢

上一篇：字節(jié)跳動(dòng)的微前端沙盒實(shí)踐
下一篇：HTML實(shí)現(xiàn)文件夾的上傳和下載