onclick 이벤트 카운트를 표시하기위한 가변 스팬 태그

Question

현재 버튼의 onclick 카운트를 표시하는 span 태그가 있습니다. 현재 숫자가 3 자리를 초과하면 span 태그 내에 맞지 않습니다. 스팬 태그를 조절 가능하게 만들 수 있습니까? 아니면 폭을 조절할 수있어서 항상 onclick 카운트를 포함 할 수 있습니까?

더 많은 자릿수를 수용 할 수 있도록 너비를 변경할 수 있지만 실제 발생하는 onclick 이벤트의 수를 예측할 수 없기 때문에 조정할 수 있습니다.

var counts = { 
    'Apples': 0, 
    'Oranges': 0, 
    'total': 0 
}; 

    function countFruit(type) { 
    document.getElementById('fruitCount').innerHTML = ++counts['total']; 
    document.getElementById(type + 'Count').innerHTML = ++counts[type]; 
} 


#OrangesCount{ 
z-index: 20; 
position:absolute; 
top:70px; 
left:45%; 
background-color:black; 
width:80px; 
border:2px solid green; 
font-family: 'BPdotsUnicaseSquareBold'; 
font-size:25px; 
color:yellow; 
padding-right:4px; 
padding-left:4px; 
} 


#ApplesCount{ 
z-index: 20; 
position:absolute; 
color:yellow; 
top:70px; 
right:45%; 
background-color:black; 
width:80px; 
border:2px solid green; 
font-family: 'BPdotsUnicaseSquareBold'; 
font-size:25px; 
    } 

    <a id="buttonright" href="#" onclick="countFruit('Apples'); return false;"> 
    <a id="buttonleft" href="#" onclick="countFruit('Oranges'); return false;"> 

    <span id="ApplesCount"></span> 
    <span id="OrangesCount"></span> 

Answer 1

는 당신은 모두 CSS에서 width을 제거해야합니다 : 당신은 그것의 폭이 고정하지 않는 요소가 자동으로 너비를 조정 할 수 있도록해야하는 경우

#ApplesCount{ 
    z-index: 20; 
    position:absolute; 
    color:yellow; 
    top:70px; 
    right:45%; 
    background-color:black; 
    border:2px solid #550010; 
    font-family: 'BPdotsUnicaseSquareBold'; 
    font-size:25px; 
} 

여기 JSFiddle

Answer 2

을합니다. 아래 예제 CSS와 같이 최소 너비를 지정할 수 있습니다.

#OrangesCount{ 
z-index: 20; 
position:absolute; 
top:70px; 
left:45%; 
background-color:black; 

/*removed 
width:80px; 
*/ 
min-width:80px; 

border:2px solid #001855; 
font-family: 'BPdotsUnicaseSquareBold'; 
font-size:25px; 
color:yellow; 
padding-right:4px; 
padding-left:4px; 
} 


#ApplesCount{ 
z-index: 20; 
position:absolute; 
color:yellow; 
top:70px; 
right:45%; 
background-color:black; 

/*removed 
width:80px; 
*/ 
min-width:80px; 

border:2px solid #550010; 
font-family: 'BPdotsUnicaseSquareBold'; 
font-size:25px; 
}