• text-collapse 文本折行
  • 屬性說明
  • 示例
    • 代碼示例

text-collapse 文本折行

解釋：文本折行組件，支持多行文本折行展示。

成都創(chuàng)新互聯(lián)公司于2013年開始，先為富陽等服務(wù)建站，富陽等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為富陽企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

屬性說明

text

String

是

組件需要展示的文本內(nèi)容

line

Number

否

3

超出該值后是否省略（3 行后的內(nèi)容打點展示）

show-button

Boolean

否

true

是否展示收起 / 展開按鈕

button-text

Array.

否

[‘展開’, ‘收起’]

按鈕文字

selectable

Boolean

否

true

文本內(nèi)容是否可選（可用于文本復(fù)制，粘貼，長按搜索等場景）

expand

Boolean

否

false

組件初始是否為展開狀態(tài)

text-collapse-class

String

否

組件外部樣式類，用于修改組件最外層樣式

text-content-class

String

否

組件外部樣式類，用于修改組件文字區(qū)域樣式

btn-text-class

String

否

組件外部樣式類，用于修改組件展開 / 收起按鈕樣式

bindexpand

EventHandle

否

點擊展開 / 收起按鈕時觸發(fā)，可用于獲取當(dāng)前組件的狀態(tài)

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例

• SWAN
• JS
• CSS
• JSON

 
 
 
  
  
  
  
  
  
 
  
  
  
 {{textCollapseDataFirst.title}}
  
  
  
 
  
  
  
 text="{{textCollapseDataFirst.text}}"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 {{textCollapseDataSecond.title}}
  
  
  
 
  
  
  
 text="{{textCollapseDataSecond.text}}"
  
  
  
 expand="{{true}}"
  
  
  
 show-button="{{false}}"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 {{textCollapseDataThird.title}}
  
  
  
 
  
  
  
 text="{{textCollapseDataThird.text}}"
  
  
  
 expand="{{true}}"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 {{textCollapseDataForth.title}}
  
  
  
 
  
  
  
 text="{{textCollapseDataForth.text}}"
  
  
  
 line="5"
  
  
  
 text-content-class="text-content-external"
  
  
  
 text-collapse-class="text-collapse-external"
  
  
  
 btn-text-class="btn-text-external"
  
  
  
 button-text="{{textCollapseDataForth.buttonText}}"
  
  
  
 >