Различные результаты для CSS-кладки и многоточия на Chrome и Safari - PullRequest
0 голосов
/ 15 сентября 2018

Я использую сеточную разметку, используя column-count на родительском элементе div, и я пытаюсь добавить многоточие к абзацу в дочернем элементе, если он превышает 4 строки, используя -webkit-line-clamp.

.не беспокоится о браузерах, не являющихся webkit в данный момент, но о получении разных результатов в chrome и safari.(Оба используют webkit в качестве движка веб-браузера).

Chrome:

enter image description here

Safari:

enter image description here

Я ожидал аналогичного поведения на обоих, но с max-height и overflow: hidden, установленными для абзаца, родительский div для сафаривсе еще беря высоту всего содержимого.

enter image description here

Прокомментировал 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>
...