html - 如何在 HTML 中重复一个字符？

Question

有没有办法在 HTML（不是 HTML5！）的表格单元格中重复打印一个字符？

*（仅使用 HTML 或仅使用 HTML 和 CSS）

** 需要打印“.” 通过一个细胞的全长。不知道单元格的确切宽度！

Answer 1

好的，在您详细说明您的问题后，我有解决方案。一个带有虚线底部边框和顶部带有白色背景的文本的 div。

例子 ：

CSS：

.line{
    border-bottom:1px dotted black;
    position:relative;
    height:16px;
}

.line span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:-2px;
    height:100%;
    padding:0 5px;
}
.line .price{
    position:absolute;
    right:0;
}​

HTML：

<div class="line">
    <span class="title">name</span>
    <span class="price">123.23$</span>
</div>
<div class="line">
    <span class="title">name</span>
    <span class="price">123.23$</span>
</div>​

http://jsfiddle.net/bKuVe/

Answer 2

我不小心遇到了这个问题，无法阻止自己发布自己的答案。

我使用这种方法已有几年了，我喜欢它的简单性。整个想法是float: left|right用于带有文本的元素，而block围绕它的元素将产生边距。overflow: hidden我们通过添加到块元素来利用这一点。
这里的另一个改进是使用::after伪类而不是实际的块元素。这很有意义，因为点应该更像样式表的一部分。

.line {
    padding: 60px 0;
}
.title {
    float: left;
}
.price {
    float: right;
}
.line::after {
    content: "\0020";
    display: block;
    min-height: 1em;
    border-bottom: 1px dotted;
    overflow: hidden;
}

<div class="line">
    <span class="title">name</span>
    <span class="price">123.23$</span>
</div>

Answer 3

制作背景图像和重复-x 怎么样？

 background:url(character.png) repeat-x;

Answer 4

如果你喜欢编码，你可以尝试这样的事情：

var tag = [tag];
var h = tag[0].getBoundingClientRect().height;
while(h===tag[0].getBoundingClientRect().height){
    tag[0].innerHTML+='-';
};
tag[0].innerHTML=tag[0].innerHTML.replace('-','');

Answer 5

如果您使用纯 HTML（我的意思是不使用任何服务器生成的 HTML），请多次写入该字符。如果您使用服务器生成的 HTML（如 PHP、JSP 等），您可以多次编写字符或使用循环。除非您使用 JavaScript ，否则这无法在客户端完成。