两个单词/句子之间的虚线

Question

我想用虚线填充两个单词/句子之间的空格。 我需要自动调整单词之间的虚线。 但是小提琴的结果还不清楚。

http://jsfiddle.net/shagun_jsfiddle/Z4DCH/6/

HTML

       <div style="position: relative; float: left;overflow: hidden; width: 1000px;" id="index1">
     <span class="left-side">Hello</span>
     <span class="right-side" >Dotted line</span>
</div>
<div style="position: relative; float: left;overflow: hidden; width: 850px; " id="index2">
     <span class="left-side">Hello</span>
     <span class="right-side" >Dotted line</span>
</div>

CSS

        .left-side{width: auto;
     max-width: 26%;
     min-width: 0%;
     text-align: justify;
     background-color: transparent;
     display: inline-block;}
.left-side:before{float: right;
     width: 0;
     white-space: nowrap;
     line-height:11px;
     content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ;
}
.right-side{width: auto;
     max-width: 26%;
     min-width: 0%;
     background-color: transparent;
     float: right;
     display: inline-block;}

在pic中，圆形内容宽度以最大和最小宽度固定。所以点应该是自动调整的。并且不应重叠。

Answer 1

如果您的问题是您的元素没有对齐，那是因为#index1的宽度与#index2不同。尝试使它们的宽度相同。

如果您的问题是点没有达到“虚线”内容，那是因为#index1和#index2比您有足够的点覆盖要宽。要么让#index1和#index2更瘦，要么添加更多点。

如果你想要的是点填充左右内容之间的所有空间（可能是动态的），那么试试这个：

HTML：

<div id="index1">
    <span class="left-side">Hello</span>
    <span class="right-side">Dotted line</span>
</div>

<div id="index2">
    <span class="left-side">Hello</span>
    <span class="right-side">Dotted line</span>
</div>

CSS：

#index1, #index2 {
    width: 400px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAABCAIAAACDoBMqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAABJJREFUGFdj+I8EGBiQuP//AwBO2xfpJMYFgQAAAABJRU5ErkJggg==) repeat-x bottom center;
}
#index2 {
    width: 250px;
}

.left-side {
    background: white;
}

.right-side {
    float: right;
    background: white;
}

示例：http://jsfiddle.net/Z4DCH/3/（我删除了许多不必要的样式来简化此示例。）

这可以通过设置9x1像素的重复背景图像（带有一个后像素）作为父元素#index1和#index2的背景来实现。然后，每个子元素都会获得一个白色背景来掩盖该背景图像。