ios 为什么我的线夹在Safari浏览器上不能使用固定高度？

wyyhbhjk 于 2023-02-06 发布在 iOS

关注(0)|答案(1)|浏览(192)

我有一个集的列表，我希望有一个固定的高度。我试图line-clamp-2为集标题，有文字是超过2行。
一切都在我的正常PC视图上工作，即使我打开开发工具并将其作为设备视图查看，它仍然显示为我想要的，但在我使用我的真实的的手机，这是iPhone来查看它，它有一个问题，我没有预料到在所有，因为没有当我在我的PC上CSS它。
我所做的，我设置我的每一个插曲项目固定70px height，有12px padding到左边和右边，和0.25rem padding为顶部和底部.我尝试了解决方案，像这篇文章：line clamp (webkit) not working in safari
也就是将overflow-hidden和line-clamp放到div而不是实际的p标记中，并在p标记中使用inline显示，但在我的示例中，它不起作用。
我正在使用tailwindCSS来CSS我在React中的组件。

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

在Chrome上的开发工具中，我将视点设置为iPhone 6/7/8时得到的结果（因为我也在使用iPhone 7）
带设备视点的PC（按预期工作）：

在使用Safari的实际设备上- Mine是iPhone 7（它并不像我预期的那样工作）：

我不知道这是什么原因，所以我不能拿出一个解决方案来解决它，因为这是正常的PC.

ios

来源：https://stackoverflow.com/questions/75342553/why-is-my-line-clamp-is-not-working-with-fixed-height-on-safari-browser

1条答案

按热度按时间

snvhrwxg1#

我已经设法处理这个通过测试在这里和那里有点围绕我的CSS。
我稍微改变了一下它的样式。首先，我将我的a标记设置为flex，并为它设置一个固定的高度（我把我的固定高度改为80px，这样看起来更适合我），在a标签周围加上padding和margin，我的a标签是父元素，然后在里面，我把我的段落p标签 Package 在一个div中，我没有设置div的高度，所以它会自动设置高度，在一个div中，现在是一个段落，我最后直接设置为line-clamp-2。
这是我现在在设备上的结果，PC始终工作正常：

注：我在a标签中有2个div，因为我改变了主意，不知道如何使它适合我的喜好，这就是为什么我有一些div具有flex，您可能不需要它，但我希望有同样问题的人能得到一个想法。
这是我的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>

赞(0）回复(0）举报 2023-02-06

我来回答

ios 为什么我的线夹在Safari浏览器上不能使用固定高度？

1条答案

相关问题

热门标签

最新问答