圆点领导跨越过多的线条 [英] Dot leaders spanning excessive lines
本文介绍了圆点领导跨越过多的线条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正尝试创建一个响应分类密钥，包括基于嵌套列表和用于创建目录表的代码的点领导。它几乎完成，但点领导有时跨越两行，当他们不需要。当页码或种类太长以至于不能与原始文本放在同一行时，它们应该只跨越第二行，并将其强制放置在下面的行上。
我想要的例子可以在这里看到： 4a是我想要的样子，4b是不是
我不确定是什么原因导致这种情况发生，因为它不会一直发生。
#key {overflow：hidden;} ol {list-style-position：outside;} ol.list {padding-left：25px; margin-top：-21.8px;}。list li {position：relative; list-style-position：outside; list-style-type：lower-alpha; padding-left：5px; list .list-item：last-child {margin：0 0 40px;} .list .list-item :: before {text-indent：-10px;} .list .list-item {margin：0 0px 15px;}。内容：............................................... ........................................; text-indent：5px; letter-spacing：6px;位置：绝对; left：0px; bottom：0px; z-index：-10;}。list .list-item .text :: after {content：........................... .................................................. ....... text-indent：5px; letter-spacing：6px;位置：绝对; left：0px; z-index：-10;}。list .list-item span {display：inline; background-color：#fff; padding-right：1px; padding-left：10px;} .list .list-item .number {float：right; font-weight：bold;颜色：＃198e9d; background-color：#fff; padding-left：11px;} / * Clearfix * / .list .list-item :: after {content：;显示：块; clear：both;} / * --figcaption-- * /。wp-caption-text {float：right; font-size：0.9em; } / *图片信息* /。info {text-align：right;颜色：灰色;边距：-1em;字体大小：0.899em; < div id = html-print-color-color：#fff}
我不能复制你的问题，如果你可以请粘贴一个链接到一个例子。但是，使用负边距应作为最后手段保留，我相信可能会导致此问题，具体取决于浏览器。试试这个。
#key {
overflow：hidden;
}
ol {
list-style-position：outside;
}
ol.list {
padding-left：25px;
margin-bottom：20px;
}
.list li {
position：relative;
list-style-position：outside;
list-style-type：lower-alpha;
padding-left：5px;
text-indent：-10px;
}
.list .list-item {
margin：0 0px 15px;
}
.list .list-item：last-child {
margin：0;
}
.list .list-item :: before {
content：.................... .................................................. .................;
text-indent：5px;
letter-spacing：6px;
位置：绝对;
left：0px;
bottom：0px;
z-index：-10;
}
.list .list-item .text :: after {
content：.................. .................................................. ................;
text-indent：5px;
letter-spacing：6px;
位置：绝对;
left：0px;
z-index：-10;
}
.list .list-item span {
display：inline;
background-color：#fff;
padding-right：1px;
padding-left：10px;
}
.list .list-item .number {
float：right;
font-weight：bold;
颜色：＃198e9d;
background-color：#fff;
padding-left：11px;
}
/ * Clearfix * /
.list .list-item :: after {
content：;
display：block;
明确：两者;
}
/ * --figcaption-- * /
.wp-caption-text {
float：right;
font-size：0.9em;
}
/ *图片信息* /
.info {
text-align：right;
颜色：灰色;
margin-top：-1em;
font-size：0.899em;
background-color：#fff
}
I am trying to create a responsive taxonomic key including dot leaders based on nested lists and code used to create a table of contents. It's nearly complete however the dot leaders sometimes span over two lines when they don't need to. They should only span over a second line when the "page number" or "species" is too long to fit on the same line as the initial text, forcing it onto the line below.
An example of what I want can be seen here: 4a is how I want it to look, 4b is not how I want it to look
I'm not sure what is causing this to happen as it doesn't happen all the time.
#key {
overflow: hidden;
}
ol {
list-style-position: outside;
}
ol.list {
padding-left: 25px;
margin-top: -21.8px;
}
.list li {
position: relative;
list-style-position: outside;
list-style-type: lower-alpha;
padding-left: 5px;
text-indent: -10px;
}
.list .list-item {
margin: 0 0px 15px;
}
.list .list-item:last-child {
margin: 0 0 40px;
}
.list .list-item::before {
content: ".......................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -10;
}
.list .list-item .text::after {
content: "....................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
z-index: -10;
}
.list .list-item span {
display: inline;
background-color: #fff;
padding-right: 1px;
padding-left: 10px;
}
.list .list-item .number {
float: right;
font-weight: bold;
color: #198e9d;
background-color: #fff;
padding-left: 11px;
}
/* Clearfix */
.list .list-item::after {
content: "";
display: block;
clear: both;
}
/* --figcaption-- */
.wp-caption-text {
float:right;
font-size: 0.9em;
}
/* image info */
.info {
text-align:right;
color:grey;
margin-top:-1em;
font-size:0.899em;
background-color:#fff
}
<div id="key">
<ol>
<li>
<ol class="list">
<li class="list-item"><span class="text">Bill short, less than 15% of lower jaw – fork length (Fig. 5a);anus located well anterior of first anal fin by a distance greater than length of first anal-fin base (Fig. 6a)</span><span class="number"><em>Tetrapturus angustirostris</em> (shortbill spearfish)</span></li>
<li class="list-item"><span class="text">Bill moderately long, more than 18% of lower jaw – fork length (Fig. 5b); anus slightly anterior of first anal fin by a distance of less than length of first anal-fin base (Fig. 6b)</span><span class="number"><em>Kajikia audax</em> (striped marlin)</span></li>
</ol>
</li>
<li>
<ol class="list">
<li class="list-item"><span class="text">Pectoral fins curved in shape, resembling a half sickle (Fig. 7a), rigid unable to be folded back against sides of body (more flexible in individuals <15 kg); dorsal-fin tip bluntly rounded (Fig. 8a); branchiostegal frill long, extending to near level with rear edge of operculum (Fig. 9a); second dorsal-fin anterior to second anal-fin (Fig. 10a)</span><span class="number"><em>Istiompax indica</em> (black marlin)</span></li>
<li class="list-item"><span class="text">Pectoral fins strap like (Fig. 7b) flexible, able to be folded back against sides of body; dorsal fin pointed at tip (Fig. 8b); branchiostegal frill short, extending to well forward of rear edge of operculum (Fig. 9b); second dorsal-fin posterior to second anal-fin (Fig. 10b)</span>
<span class="number"><em>Makaira nigricans</em> (blue marlin)</span></li>
</ol>
</li>
</ol>
</div>
解决方案 I could not replicate your issue, if you can please paste a link to an example. However, using negative margins should be reserved as a last resort, and I believe could have caused the issue, depending on the browser. Try this.
#key {
overflow: hidden;
}
ol {
list-style-position: outside;
}
ol.list {
padding-left: 25px;
margin-bottom: 20px;
}
.list li {
position: relative;
list-style-position: outside;
list-style-type: lower-alpha;
padding-left: 5px;
text-indent: -10px;
}
.list .list-item {
margin: 0 0px 15px;
}
.list .list-item:last-child {
margin: 0;
}
.list .list-item::before {
content: ".......................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -10;
}
.list .list-item .text::after {
content: "....................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
z-index: -10;
}
.list .list-item span {
display: inline;
background-color: #fff;
padding-right: 1px;
padding-left: 10px;
}
.list .list-item .number {
float: right;
font-weight: bold;
color: #198e9d;
background-color: #fff;
padding-left: 11px;
}
/* Clearfix */
.list .list-item::after {
content: "";
display: block;
clear: both;
}
/* --figcaption-- */
.wp-caption-text {
float:right;
font-size: 0.9em;
}
/* image info */
.info {
text-align:right;
color:grey;
margin-top:-1em;
font-size:0.899em;
background-color:#fff
}
这篇关于圆点领导跨越过多的线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
