fullcalendar 제목 범위 텍스트가 원하는 너비를 초과했습니다

Question

제목의 fc-content div 안에 끝에 숫자를 표시하는 div를 추가하고 싶습니다. 문제는 타이틀 스팬이 디스플레이를 block으로 설정 함에도 불구하고 너비를 줄이려는 시도에 따르지 않는 것 같습니다. 항상 전체 fc- 콘텐츠 너비로 확장됩니다.

HTML

<div class="fc-content"> 
<span class="fc-title">I want to fit text to span's width</span> 
<div class="number">128</div> 
</div> 

CSS

내가 의도적으로 스팬 텍스트가 넘치는 방법을 보여 50 % 스팬 폭을 설정

.fc-title{ 
    display:block; 
    width:50%; 
    } 
.number{  
    position: absolute;  
    left:82%; 
    top:0; 
    width:18%; 
    height:100%;  
    color:white; 
    text-align: center; 
    background-color: red; 
    } 

. 자바 스크립트를 사용하지 않고 어떤 해결책이 있습니까?

Answer 1

당신이 사용하는 어떤 브라우저? 내가 jsfiddle에 예를 넣으면 그것을 작동 :

.fc-content{ 
    width: 200px; 
    position:relative; 
} 
.fc-title{ 
    display:block; 
    width:82%; 
    background: Green; 
} 
.number{  
    position: absolute;  
    left:82%; 
    top:0; 
    width:18%; 
    height:100%;  
    color:white; 
    text-align: center; 
    background-color: red; 
} 

<div class="fc-content"> 
    <span class="fc-title">I want to fit text to span's width</span> 
    <div class="number">128</div> 
</div> 

https://jsfiddle.net/vcs1toLn/2/