在带有点或连字符的标签之间填充可用空格 [英] Fill available spaces between labels with dots or hyphens

问题描述

我有一个页面包含标签包含在一个div，标签有一个变量，我想填充字符，点或' - '之间的空格。

I have a page with labels which are contained in a div, the labels has a variable with and i want to fill spaces between both with characters, dots or '-'.

例如。

我的标签文字1 -----------

My label text 1 ----------- Some Text Here.

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

My text 2 ----------------------- Another Text.

如果你注意到这两个文本是对齐的（或至少我尝试），可能是一个计数字符的问题，但字符可以有不同的宽度，任何人都知道一个干净的方式做这个编程在Asp.Net，css，jquery还是别的什么？

If you notice both text are justified (or at least i try), could be a problem of counting characters but character can have different width, any one knows a clean way of doing this programmatically in Asp.Net, css, jquery or anything else?

更新

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

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

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

Someone suggested in answers align both labels with css, but i think i will be having the same problem with the characters in the middle, which can be another label of course. Any thoughts?

更新

............... 。

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

Patrick的回答真的接近解决方案，但是现在连字符没有显示在IE8中，也许有一个小姐理解我的一个意见，应该工作在IE7，IE8和Firefox上，只有这些浏览器。

Answer from Patrick is really close to the solution, but now hyphens are not shown in IE8, maybe there is a miss understand in one of my comments, it should work on IE7, IE8 and Firefox, only these browsers.

感谢所有人。

推荐答案

http://jsfiddle.net/FpRp2/4/ （更新，现在的工作原理是ie7）

解决@Marcel使用虚线边框而不是文本连字符解决了IE7的最后一个问题。 / strong>

The solution @Marcel gave to use a dashed border instead of text hyphens solved the final issue with IE7.

（注意，我目前只在Safari，Firefox和Chrome中测试。）

(Note, I've only tested in Safari, Firefox and Chrome so far.)

编辑：IE8工程。 正在修复IE7。

IE8 works. Working on a fix for 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;
}

这篇关于在带有点或连字符的标签之间填充可用空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！