Я использую сеточную разметку, используя column-count
на родительском элементе div, и я пытаюсь добавить многоточие к абзацу в дочернем элементе, если он превышает 4 строки, используя -webkit-line-clamp
.
.не беспокоится о браузерах, не являющихся webkit в данный момент, но о получении разных результатов в chrome и safari.(Оба используют webkit в качестве движка веб-браузера).
Chrome:
Safari:
Я ожидал аналогичного поведения на обоих, но с max-height
и overflow: hidden
, установленными для абзаца, родительский 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>