多行文本控件(富文本框)怎樣自動(dòng)填寫？

謂多行文本輸入控件，就是網(wǎng)頁表單中，因輸入內(nèi)容較多需換行顯示的文本輸入控件，一般為textarea元素。很多富文本輸入框也是對(duì)textarea進(jìn)行包裝。

多選文本輸入框

自動(dòng)填寫多行文本輸入控件的五種方法
1、通過修改元素屬性填表
textarea元素比較特殊，在html中直接指定value屬性值是無效的。修改textarea元素的text屬性，可以實(shí)現(xiàn)自動(dòng)填表，但要求textarea元素未被腳本賦值的情況下text才有效。修改text屬性不會(huì)觸發(fā)元素綁定的事件，但在木頭瀏覽器填寫項(xiàng)目中，可以明確指定填表前和填表后需要觸發(fā)的事件。

修改元素屬性

2、由系統(tǒng)向?yàn)g覽器發(fā)送數(shù)據(jù)
在window系統(tǒng)下，這幾乎是一個(gè)萬能的方法，支持中文輸入，獲得控件元素后，填寫屬性設(shè)置為KeyboardSend。在自動(dòng)輸入前，瀏覽器會(huì)自我激活為當(dāng)前活動(dòng)窗口，同時(shí)把輸入焦點(diǎn)轉(zhuǎn)移到設(shè)定的多行文本控件上。在輸入過程中，不能手工干預(yù)，不能讓控件失去焦點(diǎn)，也不能切換到別的程序窗口。輸入遠(yuǎn)程會(huì)觸發(fā)控件綁定的事件代碼。

系統(tǒng)向?yàn)g覽器發(fā)送內(nèi)容

3、模擬人工鍵盤操作
獲取元素后，把填寫屬性設(shè)置為Keyboard，能達(dá)到人工按下實(shí)體鍵盤一樣的效果，因此不能輸入中文，執(zhí)行時(shí)同樣會(huì)自動(dòng)激活瀏覽器窗體，輸入焦點(diǎn)轉(zhuǎn)移到多選文本控件上。輸入過程中會(huì)觸發(fā)元素綁定的相關(guān)事件。

模擬人工按鍵

4、模擬鍵盤事件
在不按下鍵盤的情況下，直接產(chǎn)生按鍵事件作用于當(dāng)前活動(dòng)窗口，獲取元素后設(shè)置填寫屬性為KeyboardEvent。與模擬人工操作效果一樣，自動(dòng)激活瀏覽器窗體，定位輸入焦點(diǎn)到多行文本控件上才能完成輸入，亦不支持中文輸入，會(huì)觸發(fā)元素控件綁定的腳本事件。

發(fā)送鍵盤事件

5、執(zhí)行腳本代碼控制輸入
在項(xiàng)目管理窗口中，創(chuàng)建一個(gè)腳本代碼的步驟，執(zhí)行JavaScript代碼修改textarea的value屬性值。注意：textarea雖然在html中沒有value屬性，但在JavaScript代碼中是支持的。不管textarea是否被賦初值，都不影響腳本執(zhí)行填表效果。

document.getElementsByTagName("textarea")[0].value="木頭軟件";

也可以使用JQuery代碼，只要勾選【引入JQuery】，瀏覽器自動(dòng)引用JQuery庫
$("textarea").eq(0).val("木頭軟件");

腳本填表多行文本框

執(zhí)行以上腳本輸入內(nèi)容后，不會(huì)觸發(fā)控件綁定的事件，如有必要，可以在代碼中主動(dòng)調(diào)用相關(guān)的事件處理代碼。也可以再添加一個(gè)填表步驟項(xiàng)目來主動(dòng)觸發(fā)事件代碼執(zhí)行。

01CSS 實(shí)現(xiàn)多行文本“展開收起”

**引言：**

在Web前端開發(fā)中，文本內(nèi)容的展示與交互常常扮演著至關(guān)重要的角色。特別是在信息爆炸的時(shí)代，合理有效地組織和展示文本信息顯得尤為關(guān)鍵。本文將聚焦一種常見的交互效果——多行文本的“展開收起”，并詳細(xì)探討如何僅使用CSS實(shí)現(xiàn)這一效果。我們將通過實(shí)戰(zhàn)代碼剖析其原理，以期幫助讀者更好地理解和應(yīng)用這一技術(shù)，優(yōu)化用戶體驗(yàn)。

---

### **一、基礎(chǔ)實(shí)現(xiàn)：CSS ellipsis和max-height**

**標(biāo)題：** 初識(shí)`text-overflow: ellipsis`與`max-height`

在實(shí)現(xiàn)“展開收起”功能之前，我們先要了解如何用CSS實(shí)現(xiàn)多行文本省略的效果。以下是一個(gè)簡單的例子：

```html

這是一段很長很長的文本，可能會(huì)超過顯示區(qū)域，此時(shí)就需要截?cái)囡@示...

</div>

<style>

.expand-collapse-text {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3; /* 行數(shù) */

-webkit-box-orient: vertical;

line-height: 1.5em;

max-height: 4.5em; /* 根據(jù)行高設(shè)置最大高度 */

}

</style>

```

上述CSS代碼設(shè)置了多行文本截?cái)嘈Ч?dāng)文本超過指定的行數(shù)時(shí)，多余的文本會(huì)被替換為省略號(hào)“...”。

---

### **二、進(jìn)階實(shí)現(xiàn)：“展開收起”按鈕與狀態(tài)切換**

**標(biāo)題：** 結(jié)合JavaScript實(shí)現(xiàn)動(dòng)態(tài)切換

接下來，我們將通過JavaScript動(dòng)態(tài)改變CSS屬性，實(shí)現(xiàn)文本的“展開”與“收起”功能。首先，我們需要一個(gè)按鈕和相應(yīng)的事件監(jiān)聽：

```html

這是一段很長很長的文本，可能會(huì)超過顯示區(qū)域，此時(shí)就需要截?cái)囡@示...

</div>

const textContainer = document.getElementById('content');

const toggleBtn = document.getElementById('toggle-btn');

// 默認(rèn)收起狀態(tài)

textContainer.style.maxHeight = '4.5em';

toggleBtn.addEventListener('click', () => {

if (textContainer.style.maxHeight === 'none') {

textContainer.style.maxHeight = '4.5em';

toggleBtn.textContent = '展開';

} else {

textContainer.style.maxHeight = 'none';

toggleBtn.textContent = '收起';

}

});

</script>

```

上述代碼中，我們首先獲取到了文本容器和按鈕元素，并設(shè)置文本容器的初始`max-height`。然后，為按鈕添加點(diǎn)擊事件監(jiān)聽器，根據(jù)`max-height`屬性判斷當(dāng)前狀態(tài)，切換文本容器的`max-height`值以及按鈕的文本內(nèi)容。

---

### **三、CSS動(dòng)畫與過渡效果**

**標(biāo)題：** 添加過渡動(dòng)畫提升用戶體驗(yàn)

為了讓“展開收起”過程更加平滑，我們可以加入CSS過渡動(dòng)畫：

```css

.expand-collapse-text {

/* ...前面的樣式不變... */

transition: max-height 0.3s ease;

}

```

這樣，當(dāng)`max-height`屬性發(fā)生改變時(shí)，文本容器的高度會(huì)以0.3秒的過渡時(shí)間逐漸變化，形成平滑的展開或收起動(dòng)畫。

---

### **四、無障礙設(shè)計(jì)與輔助功能**

**標(biāo)題：** 考慮無障礙訪問與ARIA標(biāo)簽

為了提升無障礙訪問體驗(yàn)，可以在按鈕上添加`aria-expanded`屬性，并隨狀態(tài)切換更新其值：

```html

```

在JavaScript中，同步更新`aria-expanded`屬性：

```javascript

toggleBtn.addEventListener('click', () => {

// ...之前的邏輯不變...

// 更新aria-expanded屬性

toggleBtn.setAttribute('aria-expanded', textContainer.style.maxHeight === 'none');

});

```

---

**結(jié)語：**

通過以上步驟，我們已經(jīng)成功實(shí)現(xiàn)了純CSS+JavaScript的多行文本“展開收起”功能，并且注重了過渡動(dòng)畫和無障礙設(shè)計(jì)的考量。這種交互效果在很多場合都非常實(shí)用，如新聞?wù)⒂脩粼u(píng)論、產(chǎn)品詳情等。掌握這一技術(shù)，不僅可以提升頁面的交互體驗(yàn)，還能彰顯出作為一名前端開發(fā)者對(duì)細(xì)節(jié)的關(guān)注和專業(yè)素養(yǎng)。持續(xù)優(yōu)化和改進(jìn)此類交互效果，將有助于我們更好地服務(wù)用戶，提升產(chǎn)品的整體品質(zhì)。

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

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

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

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

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

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

多行文本截?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ò)，千萬不要以為浮動(dòng)已經(jī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)繞按鈕上方的空間，空出了一大截，無能為力了嗎？

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

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

現(xiàn)在按鈕到了偽元素的左側(cè)，如何移到下面呢？很簡單，清除一下浮動(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)中，可以通過百分比來計(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í)踐下來，display: grid 和 display: -webkit-box 同樣有效，原理類似

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

除此之外，動(dòng)態(tài)高度也可以采用負(fù)的 margin 來實(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 了，無法用于生產(chǎn)環(huán)境。

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

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

其實(shí)上面的努力已經(jīng)實(shí)現(xiàn)了右下角環(huán)繞的效果，如果在知道行數(shù)的情況下設(shè)置一個(gè)最大高度，是不是也完成了多行截?cái)嗄兀繛榱吮阌谠O(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ú)立出來（通常不會(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)起來

<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)在來添加兩種狀態(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)是模擬出來的，不能自動(dòng)隱藏，所以需要額外來處理

.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ù)我們都需要從別的角度，采用 “障眼法”來實(shí)現(xiàn)。比如在這個(gè)場景，當(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，所以測試 IE 可以自行復(fù)制在本地測試。

四、總結(jié)和說明

總的來說，重點(diǎn)還是在布局方面，交互其實(shí)相對(duì)容易，整體實(shí)現(xiàn)的成本其實(shí)是很低的，也沒有比較生僻的屬性，除了布局方面 -webkit-box 貌似有點(diǎn) bug （畢竟是-webkit-內(nè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 遮擋“障眼法”

多行文本展開收起效果可以說是業(yè)界一個(gè)老大難的問題了，有很多 js 解決方案，但是感覺都不是很完美，希望這個(gè)全新思路的 CSS 解決方式能給各位帶來不一樣的啟發(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

在線咨詢

上一篇：美國必須交出這些可疑的原始病例數(shù)據(jù)，讓中方徹查
下一篇：sonar代碼覆蓋率實(shí)戰(zhàn)

您的項(xiàng)目需求

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

整合營銷服務(wù)商

多行文本控件(富文本框)怎樣自動(dòng)填寫？

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

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

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

四、總結(jié)和說明

您的項(xiàng)目需求