How to display 2 lines with ellipsis at the end with css in react js?

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 . Youtube styles work on all browsers like safari and iOS devices browsers .

and I use inline styling in react js like this :

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

The problem is it doesn't on macbook safari browser or any iOS device browser but it is the same css styles that youtube has .

How can I make sure that these styles work on iOS devices browsers and safari ? Is there something missing ?

Try the below solution, it works fine..

on my component.js file

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

on my component.module.css file

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

Output with expected result