index.wxml 2.1 KB

123456789101112131415161718192021222324252627282930
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Ellipsis</view>
  4. <view class="page__desc">文本省略</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">尾部省略</view>
  8. <wux-ellipsis direction="end" content="{{ content }}" bind:click="onContentClick" />
  9. <view class="sub-title">头部省略</view>
  10. <wux-ellipsis direction="start" content="{{ content }}" />
  11. <view class="sub-title">中间省略</view>
  12. <wux-ellipsis direction="middle" content="{{ content }}" />
  13. <view class="sub-title">多行省略</view>
  14. <wux-ellipsis rows="3" content="{{ content }}" />
  15. <view class="sub-title">展开收起</view>
  16. <wux-ellipsis expandText="展开" collapseText="收起" content="{{ content }}" />
  17. <view class="sub-title">仅展开</view>
  18. <wux-ellipsis direction="end" expandText="展开" content="{{ content }}" />
  19. <wux-ellipsis direction="start" expandText="展开" content="{{ content }}" />
  20. <wux-ellipsis direction="middle" expandText="展开" content="{{ content }}" />
  21. <view class="sub-title">默认展开</view>
  22. <wux-ellipsis defaultExpanded expandText="展开" collapseText="收起" content="{{ content }}" />
  23. <view class="sub-title">emoji</view>
  24. <wux-ellipsis expandText="展开" collapseText="收起" content="🐮🐮🐮🐶🐶🐶🐱🐱🐱🐯🐯🐯🐻🐻🐻🐮🐮🐮🐶🐶🐶🐱🐱🐱🐯🐯🐯🐻🐻🐻" />
  25. <view class="sub-title">数字或英文</view>
  26. <wux-ellipsis wux-class="word-break" expandText="展开" collapseText="收起" content="6666666666666666666666666666666666666666666666666666" />
  27. <wux-ellipsis wux-class="word-break" expandText="展开" collapseText="收起" content="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb" />
  28. <view class="page__desc">当文本内容中包含大量数字或英文时,文本内容无法省略;此时,如果需要让文本省略生效,可以手动添加 word-break 样式(如 word-break: break-word),从而实现自动省略。</view>
  29. </view>
  30. </view>