Question

我正在尝试找出如何在可能包装的文本之间建立一个领导者。领导者应该有一个可变的宽度，即使在任何一方只有一个单词时也可以工作。

以下是一个例子：

Lorem ipsum dolor坐下来，精神上的精神。 Nulla massa neque，lauet 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＆amp; Table of contents: leading dots）尝试了解决方案。不幸的是，当文本的两边都包装时，这些都没有。

我有一个小提琴http://jsfiddle.net/crstop/vkDgJ/12/，我最接近解决方案。它工作得相当好，但领导点的固定宽度并不理想。

HTML：

<ul class=leaders>
    <li>
        <span>The text on the left of the leaders. This text can be rather long and
         may wrap to another line. The leader should start at the end of this and      
         continue until it reaches the beginning of the right side text</span>
        <span class="dotsA"></span>
        <span>This is the right side text.This text can be rather long and may wrap 
        to another line. </span>
   </li>
   <li><span>one</span><span class="dotsA"><span>word</span>
</ul>

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 +

Answer 1

如果我说得对，那么HTML的细微变化可能会解决它。

<p>The text on the left of the leaders. This text can be rather long and may wrap to another line. The leader should start at the end of this and continue until it reaches the beginning of the right side text<span class="dotsA"></span>
This is the right side text.This text can be rather long and may wrap to another line. </p>

以下是演示：http://jsfiddle.net/vkDgJ/17/

Answer 2

使用此HTML：

<div class="leader">
  <span>Peter Piper picked a peck of pickled peppers. A peck of pickled peppers Peter Piper picked. If Peter Piper picked a peck of pickled peppers, Where's the peck of pickled peppers Peter Piper picked?</span>
  <span>The peck of pickled peppers Peter Piper picked is gone.</span>
</div>
<div class="leader">
  <span>Really?</span>
  <span>Really.</span>
</div>

和这个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上使用它。

带有可能包装的文本的点头

2 个答案: