如何在react js中使用css显示末尾带有省略号的2行？

Question

我想在两行中显示帖子描述，并在末尾添加省略号。我实际上复制了检查 youtube css styles 所需的样式。Youtube 样式适用于所有浏览器，例如 safari 和 iOS 设备浏览器。

我在 React js 中使用内联样式，如下所示：

                       <span
                          style={{
                            lineHeight: "2rem",
                            fontWeight: "500",
                            maxHeight: "4rem",
                            overflow: "hidden",
                            display: "-webkit-box",
                            textOverflow: "ellipsis",
                            whiteSpace: "normal",
                            WebkitLineClamp: 2,
                            WebkitBoxOrient: "vertical",
                            msTextOverflow: "ellipsis",
                          }}
                        >
                          {description}
                        </span>

问题是它不适用于 macbook safari 浏览器或任何 iOS 设备浏览器，但它与 youtube 具有相同的 css 样式。

如何确保这些样式适用于 iOS 设备浏览器和 safari？是不是少了点什么？

Answer 1

尝试下面的解决方案，效果很好..

在我的 component.js 文件上

import React, { useEffect, useState } from "react";
import classes from "./component.module.css"

export const Component = () => {
   return (
    <div className={classes.css}>
        I want to display post description in 2 lines with ellipsis at the end. I actually copied the styles needed from inspecting youtube css styles .
    </div>
   )

在我的 component.module.css 文件上

.css{
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

输出符合预期结果