Question

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

这个想法是创建一个包含大量点的div，并用一个带有白色背景的span-elements（文本和页码）覆盖它。

这非常有效，除了以下两个问题：

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

代码：

<?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>

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

Answer 1

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

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

FIDDLE：http://jsfiddle.net/9MJsz/

Answer 2

它与您目前正在进行的操作并不完全相同，但您只需将div元素中的每个项目都设为border-bottom:1px dotted #000;。

或者，选择look here for a similar thread，and relevant CSS answer

Answer 3

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

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

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

引导点的CSS样式

3 个答案: