fullcalendarタイトルのスパンテキストが希望の幅を超えています

Question

タイトルのfc-content divの末尾に数字を表示する別のdivを追加します。問題は、タイトルスパンがブロックを表示に設定しているにもかかわらず、その幅を縮小しようとする試みに従わないように見えるということです。これは常に完全な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

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

私は意図的スパンテキストがオーバーフローする方法を示すために50％にスパン幅を設定します。 javascriptを使用しないで解決策はありますか？

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/