Macbook Safari memaparkan teks tersembunyi/limpahan sebagai disusun

Question

Saya menggunakan Amplify UI dalam perpustakaan React dan membuat kad yang memaparkan pengguna dan beberapa maklumatnya. Walau bagaimanapun, jika mereka mempunyai terlalu banyak maklumat, limpahan terputus dan boleh dilihat pada halaman lain. Semuanya kelihatan baik kecuali untuk beberapa Macbook pengguna. Saya keliru kerana saya tidak mengalami masalah ini walaupun dengan Iphone saya.

Kad pengguna sepatutnya kelihatan seperti ini:

Tetapi pada MacBook sesetengah orang, ia kelihatan seperti ini:

Sila abaikan tanda merah maklumat peribadi.

Begini cara saya memanggil Amplify pada komponen yang dijana daripada kod 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",
                  },

Berikut ialah coretan kod komponen yang dijana oleh 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>

Adakah terdapat apa-apa lagi yang boleh saya tambahkan pada bekas ini supaya safari MacBook kini memaparkan maklumat bertindan?

Answer 1

Ini berkemungkinan besar kerana overflow: Clip versi 15 atau lebih rendah versi desktop Safari tidak disokong Pengguna yang belum mengemas kini sistem pengendalian Mac OSX asas akan menggunakan versi ini (pada Mac, versi Safari terikat dengan. versi OS).

clip 的行为与 hidden Serupa. Ini mungkin atau mungkin tidak dipaparkan dengan betul, tetapi cuba ubahnya:

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

Kepada:

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