Jos*_*nel 6 html css xslt xslt-1.0
我正在研究一种CSS样式,它为目录页面生成点.该代码基于https://code.google.com/p/wkhtmltopdf/issues/detail?id=1073.
我们的想法是创建一个包含大量点的div,并用一个带有白色背景的span-elements(文本和页码)覆盖它.
这非常有效,除了以下两个问题:
码:
<?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>
有谁知道如何解决这些问题？谢谢!
我知道你正在寻找一个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/
| 归档时间： |
|
| 查看次数： |
1784 次 |
| 最近记录： |