Macbook Safari zeigt ausgeblendeten/überlaufenden Text gestapelt an

Question

Ich verwende Amplify UI in der React-Bibliothek und erstelle eine Karte, die den Benutzer und einige seiner Informationen anzeigt. Wenn jedoch zu viele Informationen vorhanden sind, wird der Überlauf abgeschnitten und auf einer anderen Seite angezeigt. Bis auf die MacBooks einiger Benutzer sieht alles gut aus. Ich bin verwirrt, weil ich dieses Problem nicht einmal mit meinem iPhone hatte.

Die Benutzerkarte sollte so aussehen:

Aber auf den MacBooks einiger Leute sieht es am Ende so aus:

Bitte ignorieren Sie die rote Markierung der persönlichen Daten.

So rufe ich Amplify für die aus Figma-Code generierte Komponente auf:

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",
                  },

Hier ist das von Amplify generierte Komponentencode-Snippet:

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

Kann ich diesen Containern noch etwas hinzufügen, damit MacBook Safari jetzt gestapelte Informationen anzeigt?

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",
                  },