我有一个包含在 div 中的标签页面，标签有一个变量 with，我想用字符、点或“-”填充两者之间的空格。
例如。
我的标签文本 1 ----------- 这里有一些文本。
我的文字 2 ----------------------- 另一个文字。
如果您注意到两个文本都是合理的（或者至少我尝试过），则可能是计算字符数的问题，但字符可以具有不同的宽度，任何人都知道在 Asp.Net、css、jquery 或其他任何东西中以编程方式执行此操作的干净方法?
更新
…………………………………………………………………………………………………………………………………………
有人在答案中建议将两个标签与 css 对齐，但我认为我会遇到与中间字符相同的问题，这当然可以是另一个标签。有什么想法吗？
更新
………………
帕特里克的回答非常接近解决方案，但现在 IE8 中没有显示连字符，也许我的评论中有一个错误理解，它应该适用于 IE7、IE8 和 Firefox，只有这些浏览器。
谢谢大家。
试试这个： http : //jsfiddle.net/FpRp2/4/ （更新，现在可以在 ie7 中使用）
@Marcel 给出的使用虚线边框代替文本连字符的解决方案解决了 IE7 的最终问题。
（注意，到目前为止，我只在 Safari、Firefox 和 Chrome 中进行了测试。）
编辑：IE8 工作。正在修复 IE7。
HTML
<div class='outer'>
<div class='container'>
<div class='filler'></div>
<span class='label'>some label</span>
<span class='text'>some text</span>
</div>
<br>
<div class='container'>
<div class='filler'></div>
<span class='label'>some other label</span>
<span class='text'>some other text</span>
</div>
</div>
CSS
.outer {
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
clip: auto;
overflow: hidden;
}
.container {
position: relative;
text-align: right;
white-space: nowrap;
}
.filler {
position: absolute;
left: 0;
right: 0;
border-bottom: 1px dashed #333;
height: 50%;
}
.label {
background: white;
float: left;
margin-right: 20px;
padding-right: 4px;
position: relative;
}
.text {
background: white;
padding-left: 4px;
position: relative;
}
我已经在一个带有纯 CSS的表格上实现了这个，甚至没有使用任何 span 或 div。
CSS是：
.dot-table td {
max-width:200px;
overflow:hidden;
white-space:nowrap;
}
.dot-table td:first-child:after {
content:" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - "
}
HTML是
<table class="dot-table">
<tr>
<td>
Coffee
</td>
<td>
45 INR
</td>
</tr>
<tr>
<td>
Tea
</td>
<td>
36 INR
</td>
</tr>
</table>
详细输出（来自我开发的站点）
在这里查看它。
使用 flexbox 的解决方案，支持文本溢出：省略号将内容保持在 1 行：
http://codepen.io/anon/pen/jPZdgr
.item {
display: flex;
justify-content: space-between;
}
.descripcion {
/*background-color: green;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.descripcion:after {
content: " ........................................................................................................................................................................................................................................................................................."
}
.precio {
/*background-color: red;*/
flex-shrink: 0;
}<div class="item">
<div class='descripcion'>Junta la trócola</div>
<div class='precio'>0´33</div>
</div>
<div class="item">
<div class='descripcion'>Gamusinos en oferta c/u</div>
<div class='precio'>6´47</div>
</div>
<div class="item">
<div class='descripcion'>Saco de rafia y linterna a pedales</div>
<div class='precio'>12´663584153,351,5,154</div>
</div>
<div class="item">
<div class='descripcion'>Jaula de bambú con led para gamusinos</div>
<div class='precio'>21´99</div>
</div>
<div class="item">
<div class='descripcion'>Otro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre
más de una, o de dosOtro concepto más repartido entre más de una, o de dos</div>
<div class='precio'>1.694</div>
</div>
<div class="item">
<div class='descripcion'>Chismes y achiperres surtidos</div>
<div class='precio'>0´10</div>
</div>
<div class="item">
<div class='descripcion'>Yugo, barzón, cavijal y mancera</div>
<div class='precio'>33´7433333333333333333333</div>
</div>
<div class="item">
<div class='descripcion'>Coyunda, sobeo, ramales y cordel</div>
<div class='precio'>125´87</div>
</div>
<div class="item">
<div class='descripcion'>Media, cuartilla, celemín y 1 envuelza</div>
<div class='precio'>48´04</div>
</div>您需要使用 CSS 来调整两个内容的布局。要么将标签分解为两个标签，然后为每个标签应用 css 类，要么用标签将<span>标签内的每一位文本包装起来，并以这种方式设置它们的样式。
用字符填充空白空间以尝试调整布局不是正确的方法，并且不建议这样做，原因与您不通过在各处添加空格字符来格式化文本文档的原因相同。
一个简单的解决方案，支持换行并在 IE 8+、FF 和 Chrome 中工作。当点直接放在spacefill-dots div中时，支持8以下的IE。
CSS 是
.spacefill,
.spacefill-dots {
line-height: 18px;
font-size: 16px;
}
.spacefill {
position: relative;
padding: 0;
margin: 0;
border: 0;
}
.spacefill-dots {
z-index: -1;
/* Push dots behind text */
height: 18px;
/* Same as line-height */
border: 0;
margin: 0;
padding: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: hidden;
}
.spacefill-text {
background: white;
/* Very important. Choose backgroundcolor*/
padding-right: 4px;
/* Optional space before first point*/
}
.spacefill .spacefill-dots::after {
content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................"
}
HTML 是：
<div class="spacefill">
<div class="spacefill-dots"></div>
<span class="spacefill-text">Short title</span>
</div>
这是内容表的一个简单示例：https : //jsfiddle.net/dua2tp11/