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

如何制作背景图片并重复x？

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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。

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

5 个答案: