fullcalendar 标题跨度文本超出所需宽度答案

【问题标题】：fullcalendar title span text exceeds desired widthfullcalendar 标题跨度文本超出所需宽度
【发布时间】：2017-12-21 22:40:30
【问题描述】：

我想在标题的 fc-content div 的末尾添加另一个显示数字的 div。问题是尽管将 display 设置为 block，但 title span 似乎不服从任何减小其宽度的尝试。它总是扩展到完整的 fc-content 宽度。

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

我故意将 span 宽度设置为 50% 以显示 span 文本如何溢出。有没有不使用javascript的解决方案；

【问题讨论】：

标签： css fullcalendar

【解决方案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/

【讨论】：

Firefox Quantum 58