Paragraph height prop

[hukpo]

Is it possible to add a height prop to the Paragraph component? My use-case is that I already know the bounding box for my text component and I need to fit the text into it.

If ellipsis: '...' is specified I'd expect the extra line NOT to render but instead apply the ellipsis to the previous one.

[xiaoosnggao]

  const para = Skia.ParagraphBuilder.Make({
      textAlign: TextAlign.Center,
      maxLines: 1,  // I think you need this
      // ellipsis: '...',
   })

[hukpo]

I saw that prop, but it has a different purpose, you need to know the line height to calculate it and achieve what I want. This gets even more complicated with nested styles.

[xiaoosnggao]

The effect may require some calculations, such as first obtaining the height of one line, and then dynamically adjusting the value of maxLines.

const boxHeight = 50

const paragraph = Skia.ParagraphBuilder.Make({
  textAlign: TextAlign.Left,
})
  .pushStyle(textStyle)
  .addText(data.data.text)
  .build()
paragraph.layout(100)

const height = paragraph.getHeight() // 20

const maxLines = Math.floor(height / lineHeight) // 2

const paragraph2 = Skia.ParagraphBuilder.Make({
  textAlign: TextAlign.Left,
  maxLines: maxLines,
  ellipsis: '...',
})
  .pushStyle(textStyle)
  .addText(data.data.text)
  .build()
  
paragraph2.layout(100)