6

我正在研究一种为目录页面生成点的 CSS 样式。该代码基于https://code.google.com/p/wkhtmltopdf/issues/detail?id=1073。

这个想法是创建一个包含很多点的 div，并用一个白色背景的跨度元素（文本和页码）覆盖它。

这工作得很好，除了以下两个问题：

  1. 点被“剪切”（截图：http: //i.imgur.com/VRJQCP5.png）
  2. 如果文本元素需要多于一行，则不会显示

代码：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:outline="http://code.google.com/p/wkhtmltopdf/outline"
                xmlns="http://www.w3.org/1999/xhtml">
    <xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
                doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
                indent="yes"/>
    <xsl:template match="outline:outline">
        <html>
            <head>
                <title>Table of Contents</title>
                <style>
                    body {
                    padding: 0cm;
                    font-family: "Georgia";
                    font-size: 12pt;
                    }
                    h1 {
                    text-align: left;
                    font-size: 18pt;
                    font-family: "Georgia";
                    font-weight: Normal;
                    margin: 0;
                    padding: 0 0 0 0mm;
                    }
                    /* We set the height of the DIV and place the link and page number absolutely.
                    The DIV is filled with dots, but these are hidden by the link and span which have a white
                    background.
                    */
                    div {
                    position: relative;
                    height: 16pt;
                    line-height: 16pt;
                    padding: 0;
                    margin: 4pt 0 2pt 0;
                    white-space: nowrap;
                    overflow: hidden;
                    }
                    a, span {
                    position: absolute;
                    top: 0;
                    display: inline-block;
                    line-height: 16pt;
                    background-color: white;
                    }
                    a {
                    left: 0;
                    text-decoration: none;
                    color: black;
                    }
                    span {
                    right: 0;
                    text-align: right;
                    padding-left: 4pt;
                    }
                    ul {
                    padding-left: 0;
                    list-style: none;
                    }
                    ul ul {
                    font-size: 100%;
                    padding-left: 0em;
                    }
                </style>
            </head>
            <body>
                <h1>Table of Contents</h1>
                <ul>
                    <xsl:apply-templates select="outline:item/outline:item"/>
                </ul>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="outline:item">
        <li>
            <xsl:if test="@title!=''">
                <div>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
                    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
                    <a>
                        <xsl:if test="@link">
                            <xsl:attribute name="href">
                                <xsl:value-of select="@link"/>
                            </xsl:attribute>
                        </xsl:if>
                        <xsl:if test="@backLink">
                            <xsl:attribute name="name">
                                <xsl:value-of select="@backLink"/>
                            </xsl:attribute>
                        </xsl:if>
                        <xsl:value-of select="@title"/>
                    </a>
                    <span>
                        <xsl:value-of select="@page"/>
                    </span>
                </div>
            </xsl:if>
            <ul>
                <xsl:apply-templates select="outline:item"/>
            </ul>
        </li>
    </xsl:template>
</xsl:stylesheet>

有谁知道我该如何解决这些问题？谢谢！

4

3 回答 3

5

我知道您正在寻找 CSS 解决方案，但只是为了好玩，我创建了一个 JavaScript 版本。（我不知道是否可以使用纯 CSS 来避免切点。）

$("a").each(function(){
    var rowHeight = $(this).height();
    while ($(this).height() === rowHeight) {
        $(this).append(" .");
    }
    $(this).html($(this).html().slice(0,-2));
});

小提琴：http : //jsfiddle.net/9MJsz/

于 2013-11-19T16:52:52.163 回答
3

它与您当前正在执行的操作并不完全相同，但您可以简单地将每个项目都放在一个div带有border-bottom:1px dotted #000;.

或者，在此处查看类似的线程和相关的 CSS 答案

于 2013-11-11T15:55:12.117 回答
0

虽然这可能并不理想，但您可以尝试 2 件事来摆脱（或减少）“切割”点和不良外观。首先，减小点的大小。点越小，问题发生的可能性越小，越不引人注目。其次，在章节名称后加一个空格。这将防止 2 个点像您在屏幕截图中显示的那样非常接近。

减小点的大小也可能有助于显示章节名称末尾的点与前导点之间的差异。

显然，这不是一个理想的解决方案。

于 2013-11-19T16:44:09.147 回答