用点或连字符填充标签之间的可用空间

Question

我有一个带有标签的页面，这些标签包含在一个 div 中，标签有一个变量，我想用字符、点或“-”填充两者之间的空格。

例如。

我的标签文本 1 ------------ Some Text Here.

我的文字 2 ----------------------- 另一个文字。

如果您注意到两个文本都是合理的（或者至少我尝试过），可能是字符计数问题，但字符可能有不同的宽度，任何人都知道在 Asp.Net、css、jquery 中以编程方式执行此操作的干净方法还是别的什么？

更新

.......

有人在答案中建议将两个标签与 css 对齐，但我认为中间的字符会有同样的问题，这当然可以是另一个标签。有什么想法吗？

更新

..................

Patrick 的回答非常接近解决方案，但是现在 IE8 中没有显示连字符，可能我的一个 cmets 中存在错误理解，它应该适用于 IE7、IE8 和 Firefox，只有这些浏览器。

谢谢大家。

Answer 1

试试这个： 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;
}

Answer 2

我已经在纯 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>

详细输出（来自我开发的网站）

观看直播here。

Answer 3

使用 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>

Answer 4

您需要使用 CSS 来调整两条内容的布局。要么将标签分成两个标签，然后对每个标签应用 css 类，要么使用 <span> 标记将标签内的每一位文本包装起来，并以这种方式设置它们的样式。

用字符填充空白以尝试调整布局不是正确的方法，并且不建议您使用与不通过在任何地方添加空格字符来格式化文本文档的相同原因。

Answer 5

一个简单的解决方案，支持换行符，适用于 IE 8+、FF 和 Chrome。支持8以下的IE，当点直接放在spacefill-dots div中时。

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/

Answer 6

1. 找到三个空格的第一个实例。我假设这是构成“中断”所需的最小数量

2. 之后找到第一个非空格字符。

3. 替换#1 (+1) 中的索引和#2 (-1) 中的索引之间的所有空格。这会给你上面的结果。

查看其他答案以获得更简洁的 CSS 方法。那将是显示文本的最简洁的方式。破折号看起来像贫民窟。 :)