我正在尝试找出如何在可能包装的文本之间建立一个领导者.领导者应该有一个可变的宽度,即使在任何一方只有一个单词时也可以工作.
这是一个例子：
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nulla massa neque,laoreet at euismod vitae,aliquet quis. ……. Curabitur tellus justo,malesuada eget egestas ac,consequat sed neque.
我在http://www.w3.org/Style/Examples/007/leaders.en.html和其他类似的问题(CSS Dot Leaders With Textured Background和Table of contents: leading dots)尝试了解决方案.不幸的是,当文本的两面都包裹时,这些都没有实际工作.
我有一个小提琴http://jsfiddle.net/crstop/vkDgJ/12/,我最接近解决方案.它工作得相当好,但领导点的固定宽度并不理想.
HTML：
CSS：
ul.leaders {
padding: 0;
overflow-x: hidden;
list-style: none;
}
ul.leaders .dotsA:Before {
width: 0;
white-space: norrmal;
background: white;
vertical-align: center;
content:". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . ";
}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white;
}
ul.leaders span + span + span {
float: right;
padding-left: 0.33em;
background: white;
}
我想要一个纯粹的CSS解决方案但我愿意使用jQuery,如果这在css中是不可能的.它也必须在IE8和FF17中工作
最佳答案
使用此HTML：
这个CSS：
.leader {
position: relative;
overflow: hidden;
z-index: 0;
}
.leader > span {
background-color: white;
}
.leader > span:first-child:after,.leader > span:last-child:before {
position: absolute;
background-color: white;
z-index: -1;
content: "................................................................"
"................................................................"
"................................................................"
"................................................................"
"................................................................"
"................................................................"
"................................................................"
"................................................................";
letter-spacing: 0.25em;
cursor: default;
}
.leader > span:last-child {
float: right;
background-color: white;
text-align: right;
}
.leader > span:last-child:before {
left: 0;
}
你应该有很好的结果.
如果你愿意,你可以在CodePen左右玩.
原文链接：https://www.f2er.com/html/425950.html