html – 引导点的CSS样式_html-js-css

概述我正在研究一种CSS样式,它为目录页面生成点.该代码基于 https://code.google.com/p/wkhtmltopdf/issues/detail?id=1073. 我们的想法是创建一个包含大量点的div,并用一个带有白色背景的span-elements(文本和页码)覆盖它. 这非常有效,除了以下两个问题： >点是“切”(截图：http://i.imgur.com/VRJQCP5.p 我正在研究一种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-@R_301_3489@: 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>

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

解决方法我知道你正在寻找一个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/

总结

以上是内存溢出为你收集整理的html – 引导点的CSS样式全部内容，希望文章能够帮你解决html – 引导点的CSS样式所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1080213.html