使用带有

时间:2016-01-23 23:47:14

标签: html css css3

我处理长文本,我希望将其拆分为带有列的屏幕页面。

我使用CSS3 column-width: 50vw为每页设置两列,效果很好(在webkit浏览器中使用-webkit前缀)。我将父高度修复为100vh,因此在文本增长时会创建新列,因为column-count具有默认的自动值。

现在我想显示页码:CSS3 counters似乎很有希望,但我不知道在哪里挂钩counter-increment

有没有办法使用计数器呢?我想出的唯一解决方案是仅按整页锁定页面滚动,并按滚动位置计算页码。这里是否需要javascript,或者是否有任何纯粹的CSS解决方案,例如在列上使用nth-child

修改:为了澄清,我添加了以下代码段来展示它是如何工作的(对于webkit浏览器)。向右滚动显示第三列。



section {height: 500px; -webkit-column-width: 40vw; }

<section>
<p>Lorem ipsum dolor sit amet consectetuer mus Curabitur vitae Curabitur orci. Orci quis facilisi Nulla libero a volutpat Curabitur eget lacinia quis. Et nibh Pellentesque sollicitudin consectetuer sagittis auctor nulla Mauris justo felis. Urna vitae consequat nulla convallis non ligula suscipit hendrerit nibh Nam. Volutpat tortor odio auctor elit sed In ornare ridiculus.</p>
<p>Id Curabitur Sed justo laoreet id Sed platea Curabitur auctor semper. Nulla Aenean Nullam facilisis ac consequat Morbi ac Aenean nunc netus. Aliquam penatibus Curabitur risus felis tellus interdum id et Quisque at. Lacinia purus consequat sapien vel Curabitur turpis wisi senectus Nam parturient. Pellentesque sit et Suspendisse.</p>
<p>Et Curabitur orci quis et et semper Aenean Sed Suspendisse semper. Facilisis consequat Donec lacus at hendrerit est eget pulvinar id tincidunt. Neque congue consequat In Nunc dolor condimentum leo habitant eget tellus. Justo id Vivamus congue et semper nec montes consequat turpis nibh. Leo Maecenas dictumst et Vestibulum.</p>
<p>Sed Vestibulum Curabitur convallis Pellentesque vel rutrum Morbi metus sed pretium. Et pellentesque eros felis velit sagittis laoreet urna eu mauris quis. Phasellus orci Vivamus vitae congue convallis dictumst semper sem eget at. Id libero ut nunc Pellentesque convallis Donec Nunc congue porttitor porttitor. Sed quis ut quis Vestibulum eros id.</p>
<p>Sapien a Nullam amet et Morbi consequat urna enim molestie mi. Aliquam semper Sed dignissim mauris Aliquam dui et tincidunt suscipit Suspendisse. Curabitur amet mauris adipiscing cursus quis lorem parturient nunc hendrerit fames. Dui hendrerit gravida dolor pulvinar quis Suspendisse leo elit tortor nonummy. At natoque magna habitasse suscipit pretium odio eget vitae laoreet Vestibulum. Nam vitae Sed mus.</p>
<p>Donec amet quis id lorem et libero accumsan et mi et. Ipsum porttitor mauris turpis adipiscing hendrerit eget tempor tincidunt sed quis. Sed arcu Morbi Phasellus felis nunc vitae platea nec massa pellentesque. Wisi ante Maecenas netus Nulla eget id et Curabitur pede tristique. Nunc Nulla hendrerit neque vitae est justo lacinia Morbi Vestibulum justo. Magna.</p>
<p>Malesuada sed nisl ac malesuada justo netus nibh mauris malesuada Quisque. Risus urna dolor elit Vestibulum vitae elit consequat Nulla odio amet. Vel sagittis Vestibulum ipsum vitae enim consequat Integer id lacinia tellus. Id hendrerit Suspendisse Maecenas ac nibh sed.</p>
<p>Curabitur Vestibulum tortor turpis tristique Nunc congue Quisque justo habitasse pellentesque. Nunc netus quam tempor ac Nam iaculis ipsum velit mattis risus. Et et vel et dictum facilisis ipsum cursus congue rutrum dolor. Sed id gravida libero hendrerit nec Nunc id Cras tellus cursus. Eros lacinia est.</p>
</section>
&#13;
&#13;
&#13;

0 个答案:

没有答案