Question

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

例如。

我的标签文字1 -----------有些文字在这里。

我的文字2 -----------------------另一篇文章。

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

更新

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

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

更新

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

Patrick的答案非常接近解决方案，但现在连字符都没有在IE8中显示，也许在我的一条评论中有一个错过的理解，它应该适用于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>

详细输出（来自我开发的网站） A detailed table with filling dots

直播here。

Answer 3

您需要使用CSS来调整两个内容的布局。将标签分解为两个标签并将css类应用于每个标签，或者使用<span>标签将标签内的每个文本包裹起来并按照这种方式设置样式。

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

Answer 4

使用flexbox的解决方案，支持文本溢出：省略号以保持内容在1行：

http://codepen.io/anon/pen/jPZdgr

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 5

一个简单的解决方案，支持换行符，适用于IE 8 +，FF＆amp;铬。当点直接放在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/

Answer 6

找到三个空格的第一个实例。我假设这是构成“休息”所需的最小数量
在此之后找到第一个非空格字符。
替换＃1（+1）中索引与＃2（-1）中索引之间的所有空格。这会给你上面的结果。

检查其他答案，了解使用CSS进行更简洁的方法。这将是显示文本最干净的方式。破折号看起来很少。：）

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

6 个答案: