Chrome和Safari在CSS砌体和省略号上的结果不同

Question

我在父div上使用column-count使用砌体网格布局，并且如果使用-webkit-line-clamp超过4行，我试图在子段落中添加省略号。

我现在不关心非Webkit浏览器，但是对于chrome和safari却获得不同的结果。 （都使用webkit作为Web浏览器引擎）。

Chrome浏览器：

Safari：

我期望两者都具有相似的行为，但是在段落上设置了max-height和overflow: hidden时，Safari的父级div仍然占据了整个内容的高度。

评论overflow:hidden，并给了background-color以供清晰理解。

我发现，如果没有column-count，或者在没有masonry类的情况下，它仍然可以正常工作。

这个问题有解决方案吗？还是我必须依靠插件来砌砌和省略？

以下是代码：

        body{
            font-family: 'Open Sans';
            margin: 30px;
            font-size: 1.05rem;
        }

        .card{
            border: 1px solid #ddd;
            width: 300px;
            padding: 25px; 
            border-radius: 6px;
        }

        .masonry{
            column-count: 3;
            column-width: 220px;
            -webkit-column-count: 3;
            -moz-column-count: 3;
            -webkit-column-width: 220px;
            -moz-column-width: 220px;
            column-gap: 25px;
        }

        .masonry div{
            display: inline-block;
        }

        .card-body p{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            line-height: 1.5em;
            max-height: 6em;
            margin: 0;
        }

<div class="masonry">
    <div class="card">
        <div class="card-body">
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
            </p>
        </div>
    </div>
</div>