更改跨度的尺寸

Question

我有一个看起来像这样的工具提示

我的代码如下：

.calendar-tooltip:hover .calendar-tooltiptext {
    visibility: visible;
    opacity: 1;
    display: block;
    position: absolute;
    height: 100%;
}


<div class="my-template-cell">
          <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
      </div>
      <span *ngIf="isHoliday(day)" class="calendar-tooltiptext"> Vacation  </span>
      <span *ngIf="isNationalHoliday(day)" class="calendar-tooltiptext"> National Holiday </span>

我需要的是，如果我有更多文本，工具提示的高度就会改变。 我尝试过将高度设置为60％，但第二行没有出现，而对于第二行，设置为100％太大了。

Answer 1

只要给您的工具提示文本为height: 100%;，就可以了-不多也不少。

如果按照MrLister的建议删除height属性，则文本将超出底部边框（只要两个父元素中的任何一个都没有overflow: hidden;）。

如果您始终想要最小的完整像元高度，我建议使用min-height: 100%;。

Answer 2

像评论中添加height: auto，然后尝试min-height:60%;