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

text-collapse 文本折行

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

属性说明

属性名	类型	必填	默认值	说明
text	String	是		组件需要展示的文本内容
line	Number	否	3	超出该值后是否省略（3 行后的内容打点展示）
show-button	Boolean	否	true	是否展示收起 / 展开按钮
button-text	Array.<string>	否	[‘展开’, ‘收起’]	按钮文字
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

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="text-collpase-wrap">
  
  
   <view>{{textCollapseDataFirst.title}}</view>
  
  
   <smt-text-collapse
  
  
   text="{{textCollapseDataFirst.text}}"
  
  
   ></smt-text-collapse>
  
  
   </view>
  
  
   <view class="text-collpase-wrap">
  
  
   <view>{{textCollapseDataSecond.title}}</view>
  
  
   <smt-text-collapse
  
  
   text="{{textCollapseDataSecond.text}}"
  
  
   expand="{{true}}"
  
  
   show-button="{{false}}"
  
  
   ></smt-text-collapse>
  
  
   </view>
  
  
   <view class="text-collpase-wrap">
  
  
   <view>{{textCollapseDataThird.title}}</view>
  
  
   <smt-text-collapse
  
  
   text="{{textCollapseDataThird.text}}"
  
  
   expand="{{true}}"
  
  
   ></smt-text-collapse>
  
  
   </view>
  
  
   <view class="text-collpase-wrap">
  
  
   <view>{{textCollapseDataForth.title}}</view>
  
  
   <smt-text-collapse
  
  
   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}}"
  
  
   ></smt-text-collapse>
  
  
   </view>
  
  
  </view>

晴川云百度小程序教程：text-collapse 文本折行

text-collapse 文本折行

属性说明

示例

代码示例

请登录后发表评论