• text-collapse 文本折行
  • 属性说明
  • 示例
    • 代码示例

text-collapse 文本折行

解释：文本折行组件，支持多行文本折行展示。

成都创新互联公司于2013年开始，先为富阳等服务建站，富阳等地企业，进行企业商务咨询服务。为富阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

属性说明

text

String

是

组件需要展示的文本内容

line

Number

否

3

超出该值后是否省略（3 行后的内容打点展示）

show-button

Boolean

否

true

是否展示收起 / 展开按钮

button-text

Array.

否

[‘展开’, ‘收起’]

按钮文字

selectable

Boolean

否

true

文本内容是否可选（可用于文本复制，粘贴，长按搜索等场景）

expand

Boolean

否

false

组件初始是否为展开状态

text-collapse-class

String

否

组件外部样式类，用于修改组件最外层样式

text-content-class

String

否

组件外部样式类，用于修改组件文字区域样式

btn-text-class

String

否

组件外部样式类，用于修改组件展开 / 收起按钮样式

bindexpand

EventHandle

否

点击展开 / 收起按钮时触发，可用于获取当前组件的状态

示例

跳转编辑工具

在开发者工具中打开

在 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}}"
  
  
  
 >