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

Posted 2021-04-07

我想在标题的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的解决方案;

答案

你使用的是什么浏览器？如果我把你的例子放在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/