Why is my line-clamp is not working with fixed height on Safari browser?

Question

I have a list of episodes that I want to have a fixed height. I tried to line-clamp-2 for the episode title that has text that is longer than 2 lines.

Everything is working on my normal PC view, even if I open Dev Tools and view it as device view, it still displays as I want, but after I use my real phone, which is iPhone to view it, it has a problem which I wasn't expecting at all because there's none when I was CSS it on my PC.

What I did, I set every episode item of mine to fixed 70px height, have 12px padding to left and right, and 0.25rem padding for top and bottom. I tried the solution like this post: line clamp (webkit) not working in safari

Which is to put the overflow-hidden and line-clamp to the div instead of the actual p tag, and in the p tag using the inline display, but in my case, it is not working.

I'm using a tailwindCSS to CSS my component in React. Here's how I tried so far:

<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
    {listEpisode.map((item, i) => (
        <Link
            to={`episode-url`}
            key={i}
            className="w-full h-[70px] px-[12px] leading-normal
            py-1 hover:text-white hover:opacity-80 hover:bg-white/20
            duration-200 ease-in-out line-clamp-2 overflow-hidden
            odd:bg-[#111111] even:bg-[#272727]"
        >
            <p className="inline after:whitespace-pre">
                {item.title}
            </p>
        </Link>
    ))}
</div>

The result I get when in Dev Tools on Chrome, I set viewpoint to iPhone 6/7/8 (because I'm using iPhone 7, too)

PC with device viewpoint (working as expected):

On the actual device using safari - mine is iPhone 7 (which is not working as I expect it to be):

I don't know what's the cause of this, so I can't come up with a solution to fix it, because it was normal on PC.

Answer 1

I've managed to handle this through test here and there a bit around my CSS.

I change a little bit how I style it. First, I set my a tag as a flex and set a fixed height for it (I change my fixed height to 80px, looks better for me), with padding, and margin stuff around the a tag and my a tag is the parent element, then inside, I wrap my paragraph p tag inside a div, I don't set that div to have any height, so it'll take auto height, inside a div, which now is a paragraph, I finally set it to line-clamp-2 directly.

Here's the result that I have now on my device, the PC is always working fine:

Note: I have 2 div inside the a tag because I changed my mind on how to make it suit my liking, and that's why I have some div that has flex, you might not need it, but I hope those who have the same problem get an idea.

This is my Tailwind CSS:

<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
    {listEpisode.map((item, i) => (
        <Link
            to={`episode-url`}
            key={i}
            className="flex items-center h-[80px]
            px-[12px] py-[8px] w-full hover:text-white 
            hover:opacity-80 hover:bg-white/20 duration-200 ease-in-out"
        >
            <div className="mr-[6px] h-full flex items-center justify-center text-amber-400 ">
                <p className="font-extrabold px-[4px] border-r-[2px] opacity-80">
                    {i+1}
                </p>
            </div>
            <div className="mx-[6px] w-full flex">
                <p className="line-clamp-2 w-full text-[#E2DFD2]">
                    {item.title}
                </p>
            </div>
        </Link>
    ))}
</div>