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

배경 이미지 및 반복 -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('-','');