Macbook Safari 将隐藏/溢出文本显示为堆叠

Question

我在 React 库中使用 Amplify UI 并制作卡片来显示用户和他们的一些信息。但是，如果他们有太多信息，溢出将被截断并可以在另一页上看到。除了某些用户的 Macbook 之外，一切看起来都很好。我很困惑，因为即使是 Iphone 也没有遇到过这个问题。

这是用户卡的样子：

但它最终在一些人的 MacBook 上看起来像这样：

个人信息请无视红色标记

以下是我如何调用 Amplify 从我的 figma 代码生成的组件：

                  Bio: {
                    overflow: "fade",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "80px",
                    fontSize: { base: ".875rem", medium: ".875rem" },
                  },
                  Subjects: {
                    alignItems: "flex-start",
                    overflow: "clip",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },

这里是 Amplify 生成的组件代码的片段：

<Flex
          gap="4px"
          direction="row"
          width="unset"
          height="unset"
          justifyContent="flex-start"
          alignItems="center"
          shrink="0"
          position="relative"
          padding="0px 0px 0px 0px"
          children={subjects}
          {...getOverrideProps(overrides, "Subjects")}
        ></Flex>
...
<Text
          fontFamily="Inter"
          fontSize="16px"
          fontWeight="400"
          color="rgba(48,64,80,1)"
          lineHeight="24px"
          textAlign="left"
          display="block"
          direction="column"
          justifyContent="unset"
          width="unset"
          height="unset"
          gap="unset"
          alignItems="unset"
          shrink="0"
          alignSelf="stretch"
          position="relative"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          isTruncated={true}
          children={tutor?.bio}
          {...getOverrideProps(overrides, "Bio")}
        ></Text>

还有什么我可以添加到这些容器中以使 MacBook Safari 现在显示堆叠信息吗？

Answer 1

这很可能是因为

overflow: clip

在 15 或更低版本的 Safari Desktop 上不受支持。最近没有更新基本 Mac OSX 操作系统的用户将使用这些版本（在 Mac 上，safari 版本与操作系统版本相关联）。

clip

行为类似于

hidden

。这可能会或可能不会正确显示，但请尝试更改：

                  Subjects: {
                    alignItems: "flex-start",
                    overflow: "clip",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },

致：

                  Subjects: {
                    alignItems: "flex-start",
                    overflow: "hidden",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },