html – 在Chrome中使用CSS打印目录的页码

概述有没有办法打印目标页码与超链接,链接到同一文件中的各个地方？ <h1>Table of Contents</h1><ul> <li><a href="#introduction">Introduction</a></li></ul>...<section id="introduction"> <!-- Appears, for example, on page 3 when p 有没有办法打印目标页码与超链接,链接到同一文件中的各个地方？

<h1>table of Contents</h1><ul>    <li><a href="#introduction">Introduction</a></li></ul>...<section ID="introduction"> <!-- Appears,for example,on page 3 when printed -->    <h1>Introduction</h1>    ...</section>

这样输出就像：

table of Contents (page 0)Introduction.........................3...Introduction (page 3)

打印到pdf(在OS X上)时,我只需要使用此功能就可以使用Google Chrome浏览器.

是否有一些CSS或JavaScript技巧可以让我实现这一目标？

解决方法 我不知道这是否适用于pdf,但回答了如何在CSS中完成此 *** 作的问题：

您可以使用CSS中伪元素的反增量生成数字：

请注意,我更改了您的< ul>到< ol>因为这是一个有序列表,无论您是否使用列表样式.

ol {    counter-reset: List-counter;}li:after {    counter-increment: List-counter;    content: counter(List-counter);    float: right;}

在文本和数字之间做一点虚线需要更多的工作,但你可以通过添加一些额外的span元素并使用CSS display：table;并显示：table-cell;妥善安排它们：

<ol>    <li><span>Test</span><span ></span></li>    <li><span>Test2</span><span ></span></li>    <li><span>Test3</span><span ></span></li></ol>

li {    display: table;}li span,li:after {    display: table-cell;    vertical-align: bottom;}li span.line {    border-bottom: 1px dotted #000;    wIDth: 100%;}

在span.line元素上将宽度设置为100％,而不设置任何宽度会强制它填充所有剩余空间(这是由于表格单元格显示元素不允许中断到新行,并且阻止溢出的内容)

See full demo

这不是必须添加额外span元素的最干净的方法,但这是一个棘手的任务.也许其他人可以花时间想出一种更有效的方法来实现它？您可以随时在整个< li>下面添加下划线,并跳过额外的标记,但代价是不太酷.

总结

以上是内存溢出为你收集整理的html – 在Chrome中使用CSS打印目录的页码全部内容，希望文章能够帮你解决html – 在Chrome中使用CSS打印目录的页码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。