ParagraphRender

Feature

使用canvas.measureText来计算最大可视文本，当有溢出时，最后一个文本会被替换为"..."

Installation

npx @meta-carbon/mc-ui@latest add paragraph-render

Usage

import ParagraphRender from '@/components/ui/paragraph-render'

<ParagraphRender fontStyle='16px' text='测试测试测试测试' />

Examples

指定行数(1\5\10)

指定字符Padding数(3\5\100\10000)

Q&A

为什么不使用css属性来做溢出显示？

确实目前css的溢出可以支持指定行数，大多数情况下的需求也仅使用css的溢出即可；但是在好麦2.7.1需求中遇到了在指定行数溢出的情况下，在溢出的尾部同行添加了额外的元素来渲染一个展开/收起的按钮，此时需要指定额外的溢出padding来防止遮挡，通过css无法实现。