CSS：截断文本而不拉伸元素？

Question

我有这个日历：

这个CSS类：

.fc-special-day {
    float: left;
    padding: 0 2px;
    font-weight: bold;
    font-size: 10px;
    width: 90%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

使用此类截断的东西是有效的，但是它做了什么，它可以在屏幕截图中看到它拉伸元素，March 11元素会导致整列被拉伸出来。

我想要的是，如果没有剩余的空间来编写尊重原始元素宽度的话，就截断文本（因为你可以看到其他列未被拉伸，因此原始宽度）。 。如果我删除了white-space: nowrap;，则文字会分成多行。

此外，如果我将width更改为px，那么它仅适用于某些特定的zoom。如果我缩小或放大，那么它会过早或过早截断（意味着会有更多空间需要或者它会超过代表日期的数字）。

Answer 1

正如O.Rares建议的那样，我可以使用span截断文本而不拉伸元素。这是我能够做到的版本，如果有人需要它：

.fc-special-day {
    float: left;
    position: relative;
    width: 88%;
}
.fc-special-day > span {
    padding: 2px;
    font-size: 10px;
    position: absolute;
    width: 100%;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}