亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Macbook Safari 將隱藏/溢出文字顯示為堆疊式
P粉466909449
P粉466909449 2024-03-30 15:31:02
0
1
811

我正在 React 庫中使用 Amplify UI 並製作顯示用戶及其一些資訊的卡片。然而,如果它們有太多訊息,溢出部分就會(huì)被切斷,並可以在另一個(gè)頁面上看到。除了某些用戶的 Macbook 之外,一切看起來都很好。我很困惑,因?yàn)檫B Iphone 都沒有遇到這個(gè)問題。

用戶卡應(yīng)如下圖所示:

但在某些人的 MacBook 上它最終看起來像這樣:

請忽略個(gè)人資訊的紅色標(biāo)記。

以下是我呼叫 Amplify 從 Figma 程式碼產(chǎn)生的元件的方法:

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 產(chǎn)生的元件程式碼片段:

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

我還可以在這些容器中添加其他內(nèi)容,以使 MacBook safari 現(xiàn)在顯示堆疊資訊嗎?

P粉466909449
P粉466909449

全部回覆(1)
P粉287726308

這很可能是因?yàn)?code>overflow: Clip 版本15 或更低版本的Safari 桌面版不支援.最近未更新基本Mac OSX 作業(yè)系統(tǒng)的使用者將使用這些版本(在Mac 上,safari 版本與作業(yè)系統(tǒng)版本相關(guān))。

clip 的行為與 hidden 類似。這可能會(huì)或可能不會(huì)正確顯示,但請嘗試變更:

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",
                  },
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板