5

折り返される可能性のあるテキスト間にリーダーを配置する方法を考え出そうとしています。リーダーは幅が可変で、両側に単語が 1 つしかない場合でも機能する必要があります。

次に例を示します。

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 ドット リーダーとテクスチャ背景と目次: 先行ドット) を試しました。残念ながら、テキストの両側が折り返されている場合、これらのどれも実際には機能しません。

私はフィドル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

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 に答える