fullcalendar title span Text überschreitet die gewünschte Breite

Question

Ich möchte am Ende in Titel fc-Inhalt div ein anderes div hinzufügen, das eine Zahl anzeigt. Das Problem ist, dass die Titelspanne anscheinend keinem Versuch folgt, ihre Breite zu reduzieren, obwohl die Anzeige auf Block gesetzt ist. Sie erstreckt sich immer auf die volle fc-Inhaltsbreite.

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

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

ich absichtlich Spannweite auf 50% zu zeigen, wie Spanne Text überläuft. Gibt es eine Lösung ohne Javascript zu verwenden?

Answer 1

Welche Browser verwenden Sie? Wenn ich Ihr Beispiel in jsfiddle setzen funktioniert es:

.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/