如何重複HTML中的字符？

Question

有沒有什麼方法可以在HTML表單中反覆打印字符（不是HTML5！）？

*（僅使用HTML或使用HTML和CSS ONLY）

**需要打印的 「」通過細胞的全長。不知道單元格的確切寬度！

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

如何製作背景圖片和repeat-x？

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

Answer 3

如果您使用純HTML（我的意思是不使用任何服務器生成的HTML），請多次寫入該字符。如果您使用的是服務器生成的HTML（如PHP，JSP等），則可以多次寫入該字符或使用循環。這不能在客戶端除非你正在使用的JavaScript。

Answer 4

我不小心碰到了這個問題，不能從張貼我自己的答案阻止自己。

我現在使用這種方法幾年了，我喜歡它的簡單性。整個想法是對文本元素使用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 5

如果你喜歡編碼，你可以嘗試這樣的事：

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('-','');