Содержимое столбцов CSS отключено в Chrome - PullRequest
Новая
       10

Содержимое столбцов CSS отключено в Chrome

0 голосов
/ 26 апреля 2018

При использовании столбцов css в Chrome (версия 66 для Mac) часть содержимого внизу предыдущего столбца обрезается и отображается вверху следующего столбца.

Это происходит только в том случае, если высота строки установлена ​​на число ниже, чем значение по умолчанию. Это нижние части (по убыванию) букв, таких как p и g.

С браузерными шрифтами по умолчанию это трудно увидеть, но с некоторыми другими шрифтами это становится более заметным и представляет большую проблему.

Вот изображение, иллюстрирующее проблему: enter image description here

.columns {
  column-count: 2;
  line-height: 1;
}
<div class="columns">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod optio magnam adipisci perspiciatis amet reiciendis? Velit harum nemo voluptatem sint saepe necessitatibus obcaecati vel eos in fugit hic ipsa accusamus assumenda qui illum, soluta consectetur
    sequi iusto non consequatur doloremque repellendus optio alias. Ea quasi, temporibus architecto rem doloremque unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, quisquam id eum, earum vel fugit harum ad commodi tenetur tempore unde accusantium reprehenderit qui fuga sint libero dolorum hic dolore sit quaerat quasi ducimus nam laborum optio. Distinctio
    magni beatae ipsum, corporis, sapiente porro quia quibusdam debitis libero at alias nihil eligendi.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis dolor quae obcaecati adipisci doloremque officiis debitis unde laudantium ipsum provident, odit excepturi quaerat aperiam dicta aliquid voluptas! Laboriosam, quia facere voluptatum beatae
    enim cum ipsa nam, harum eligendi obcaecati optio nostrum architecto, minima quod ducimus consequatur ea voluptate soluta. Repellat.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque velit modi doloribus aut, ipsum assumenda autem ex vel deserunt odio enim nam quasi! Itaque totam ab dignissimos, perferendis sint est repellendus debitis animi sunt odit nesciunt soluta
    deserunt labore quidem perspiciatis a culpa nemo exercitationem repudiandae, commodi maxime. Sapiente, perspiciatis ad?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto itaque deserunt in ipsa veniam minima et aliquam, veritatis laboriosam, qui exercitationem eos earum dolorum. Voluptatem maxime possimus architecto non id impedit rem eius
    autem nulla illum ut ex doloremque deleniti suscipit nisi natus, culpa quis laboriosam. Repellat odio sit quaerat eligendi.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aperiam repellat eligendi consequuntur temporibus, ipsum quidem animi officiis similique deleniti aut sapiente, blanditiis officia, exercitationem odio laboriosam cumque explicabo facere
    voluptates. Facere nam accusamus maxime maiores voluptatum, est debitis error architecto nobis id ipsa? Nisi aspernatur itaque corrupti qui esse.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam, ratione consequatur laborum libero sapiente minus eaque nisi molestiae! Voluptate quas tenetur illum aut explicabo. Harum repudiandae, doloribus voluptatum consectetur numquam mollitia
    placeat sed, assumenda repellat velit non maxime eos ipsum nam ratione. Amet tempora similique odit iusto, facere deserunt eius recusandae officiis impedit explicabo et?</p>
</div>
...