5

我正在尝试弄清楚如何在可能换行的文本之间设置一个领导者。领导者应该有一个可变的宽度，即使两边只有一个单词也能工作。

这是一个例子：

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）。不幸的是，当文本的两边都换行时，这些都不起作用。

我有一个 Fiddle 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 解决方案，但如果仅在 css 中不可能，我愿意使用 jQuery。它还必须在 IE8+ 和 FF17+ 中工作

4

2 回答 2

3

如果我做对了，您的 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/

于 2013-04-18T17:57:08.190 回答
1

使用此 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上玩它。

于 2013-12-13T19:44:39.323 回答