引导点的CSS样式 [英] CSS style for leading dots
本文介绍了引导点的CSS样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究为目录页面生成点的CSS样式。该代码基于 https://code.google.com/p/ wkhtmltopdf / issues / detail？id = 1073 。
这个想法是创建一个有很多点的div，并用span-elements （文本和页码），它们有一个白色背景。
这很好，除了以下两个问题：
- 点是剪切（截图： http：//我.imgur.com / VRJQCP5.png ） 如果文本元素需要多行，则不会显示
- / ol>
代码：
<？xml version =1.0encoding = 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>目录< / title>
< style>
body {
padding：0cm;
font-family：格鲁吉亚;
font-size：12pt;
}
h1 {
text-align：left;
font-size：18pt;
font-family：格鲁吉亚;
font-weight：普通;
保证金：0;
填充：0 0 0 0mm;
}
/ *我们设置DIV的高度并绝对放置链接和页码。
DIV充满了点，但是这些由链接和跨度隐藏，其背景为白色
。
* /
div {
position：relative;
身高：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;
背景颜色：白色;
}
a {
left：0;
text-decoration：none;
颜色：黑色;
}
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>目录< / 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：value-of select =@ link/>
< / xsl：attribute>
< / xsl：if>
< / 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>
有谁知道我该如何解决这些问题？
Thanks！解决方案我知道你在寻找一个CSS解决方案，但为了好玩，我创建了一个JavaScript这个版本。 （我不知道是否可以避免使用纯CSS的切点。）
$（a）。每个（函数（）{
var rowHeight = $（this）.height（）;
while（$（this）.height（）=== rowHeight）{
$（this） .append（。）;
}
$（this）.html（$（this）.html（）。slice（0，-2））;
}）;
FIDDLE： http://jsfiddle.net/9MJsz/
I'm working on a CSS style which produces dots for a table of contents page. The code is based on https://code.google.com/p/wkhtmltopdf/issues/detail?id=1073.
The idea is to create a div with lots of dots in it and overlay it with a span-elements (text and page-number), which have a white background.
This works quite good, except for following two issues:
- dots are "cut" (screenshot: http://i.imgur.com/VRJQCP5.png)
- if a text-element requires more than one line, it doesn't get displayed
Code:
<?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>Does anyone know how I could fix those issues? Thanks!
解决方案I know you were looking for a CSS solution, but just for fun, I created a JavaScript version of this. (I don't know if it's possible to avoid the cut dots using pure 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/
这篇关于引导点的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http：//我.imgur.com / VRJQCP5.png](\"http://i.imgur.com/VRJQCP5.png\"){kind=link}
