css列内容切断了chrome中的bug

时间:2018-04-26 19:28:06

标签: css google-chrome multiple-columns

在Chrome中使用css列时(Mac上的第66版),上一列底部的一些内容会被截断并显示在下一列的顶部。

仅当line-height设置为低于默认值的数字时才会发生。它是字母的底部(下降部分),如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>

0 个答案:

没有答案