I must be doing something wrong? Puts component at body level?

[byers174]

I'm using a pretty simple version inside a Card component. The card is rendered for however many are in the array. for example 10.

<div className={'Cards-cardText'}>
   <LinesEllipsis
       text='hello'
       maxLine={3}
       basedOn='letters'
   />
</div

And at the body, level, I'm getting 10 of these.

<div class="LinesEllipsis-canvas " aria-hidden="true" style="box-sizing: content-box; width: 615px; font-size: 12px; font-weight: 400; font-family: &quot;Helvetica Neue&quot;, Arial, Helvetica, Verdana, sans-serif; font-style: normal; letter-spacing: normal; text-indent: 0px; white-space: normal; word-break: normal; overflow-wrap: normal; padding: 0px; position: absolute; bottom: 0px; left: 0px; height: 0px; overflow: hidden; border: none;">
    <span class="LinesEllipsis-unit">h</span>
    <span class="LinesEllipsis-unit">e</span>
    <span class="LinesEllipsis-unit">l</span>
    <span class="LinesEllipsis-unit">l</span>
    <span class="LinesEllipsis-unit">o</span>
</div>

What the heck am I doing wrong?

[xiaody]

Nothing looks wrong. The LinesEllipsis-canvas elements are used to calculate text layout and are expected to be invisible. What's bothering you?

[kapir]

We had this issue, for us it was putting the LinesEllipsis inside a styled component.

const StyledLinesEllipsis = styled(LinesEllipsis)`
    some styling
`

Could the styling of className "Cards-cardText" be doing this?