Chakra-UI 文本组件 noOfLines 在 Safari 中无法正确显示

发布于 2025-01-18 01:33:46 字数 578 浏览 0 评论 0原文

我在Next.js打字网络应用程序中拥有脉轮-UI文本组件。 Nooflines在Safari中不正确显示，但在Chrome中正确。有什么建议吗？

<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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

童话 2025-01-25 01:33:46

我有nooflines与reactmarkdown 完全相同的堆栈和问题。我通过nooflines与maxheight：

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

注意：注意：您将失去省略号和witchoverflow ='Ellipsis'不适用于我。

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.

回复收藏 0 原文

鱼忆七猫命九 2025-01-25 01:33:46

我遇到了同样的问题，我通过使用Overflow和maxheight属性来解决它：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>

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>

回复收藏 0 原文