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 桌面版不支持.最近未更新基本 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",
                  },