Chakra-UI Text component noOfLines doesn't display right in Safari

Question

I havea a Chakra-UI Text component in a Next.js TypeScript web app. The noOfLines doesn't display right in Safari, but correct in Chrome. Any suggestions?

<Box pt={3} width={'100%'}>
    <Text noOfLines={show ? 0 : 2}>
        <ReactMarkdown>{collection.description}</ReactMarkdown>
    </Text>
    <Button size="sm" onClick={handleToggle} variant={"link"}>
        Show {show ? "Less" : "More"}
    </Button>
</Box>

Answer 1

I have the exact same stack and problem with noOfLines not playing nicely with ReactMarkdown. I worked around this by swapping noOfLines with maxHeight:

<Text overflow='hidden' maxHeight={show ? undefined : '5em'}>

Note: You'll lose the ellipsis and textOverflow='ellipsis' wasn't working for me.

Answer 2

I had the same problem, I solved it with using overflow and maxHeight properties for Safari :

...
const isSafari = typeof navigator !== "undefined" && navigator.userAgent.includes("Safari");
...

              <Text
                noOfLines={4}
                overflow={isSafari ? "hidden" : undefined}
                maxHeight={isSafari ? "85px" : undefined}
              >
                <ReactMarkdown disallowedElements={["img"]}>
                  {props.data.content}
                </ReactMarkdown>
              </Text>