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

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

使用 Flexbox 的解决方案，支持文本溢出：省略号以将内容保留在一行上：

\n\n

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

\n\n

\r\n

\r\n

.item {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n.descripcion {\r\n  /*background-color: green;*/\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.descripcion:after {\r\n  content: " ........................................................................................................................................................................................................................................................................................."\r\n}\r\n.precio {\r\n  /*background-color: red;*/\r\n  flex-shrink: 0;\r\n}

\r\n

<div class="item">\r\n  <div class=\'descripcion\'>Junta la tr\xc3\xb3cola</div>\r\n  <div class=\'precio\'>0\xc2\xb433</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Gamusinos en oferta c/u</div>\r\n  <div class=\'precio\'>6\xc2\xb447</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Saco de rafia y linterna a pedales</div>\r\n  <div class=\'precio\'>12\xc2\xb4663584153,351,5,154</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Jaula de bamb\xc3\xba con led para gamusinos</div>\r\n  <div class=\'precio\'>21\xc2\xb499</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Otro concepto m\xc3\xa1s repartido entre m\xc3\xa1s de una, o de dosOtro concepto m\xc3\xa1s repartido entre m\xc3\xa1s de una, o de dosOtro concepto m\xc3\xa1s repartido entre m\xc3\xa1s de una, o de dosOtro concepto m\xc3\xa1s repartido entre m\xc3\xa1s de una, o de dosOtro concepto m\xc3\xa1s repartido entre\r\n    m\xc3\xa1s de una, o de dosOtro concepto m\xc3\xa1s repartido entre m\xc3\xa1s de una, o de dos</div>\r\n  <div class=\'precio\'>1.694</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Chismes y achiperres surtidos</div>\r\n  <div class=\'precio\'>0\xc2\xb410</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Yugo, barz\xc3\xb3n, cavijal y mancera</div>\r\n  <div class=\'precio\'>33\xc2\xb47433333333333333333333</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Coyunda, sobeo, ramales y cordel</div>\r\n  <div class=\'precio\'>125\xc2\xb487</div>\r\n</div>\r\n<div class="item">\r\n  <div class=\'descripcion\'>Media, cuartilla, celem\xc3\xadn y 1 envuelza</div>\r\n  <div class=\'precio\'>48\xc2\xb404</div>\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 3

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

详细输出(来自我开发的网站)

在这里观看它.