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 ?