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