如何在CSS中為媒體查詢覆蓋文本溢出？

Question

當它在768px視口以下時，有一段溢出的段落被切成一行：

.caption p {
    font-size:1.25em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

我想讓完整的段落再次顯示超過768像素的視口。 如何針對768px以上的媒體查詢覆蓋此設置？ 文本變得很奇怪，我似乎無法通過還原下面的其他屬性來獲得完整的段落。 我不知道該如何處理文本溢出。 我嘗試“無”，但似乎沒有任何價值。

@media (min-width: 768px) {
    .caption p {
        font-size:1.5em;
        overflow: visible;
        white-space: normal;
        text-overflow: none; /*???*/
    }
}

謝謝！

Answer 1

可以將媒體查詢代碼放在該元素的常規CSS樣式之后，或者將!important放在text-overflow 。

所以要么

.caption p {
    font-size:1.25em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .caption p {
        font-size:1.5em;
        overflow: visible;
        white-space: normal;
        text-overflow: none;
    }
}

要么

.caption p {
    font-size:1.25em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

...

@media (min-width: 768px) {
    .caption p {
        font-size:1.5em;
        overflow: visible;
        white-space: normal;
        text-overflow: none !important;
    }
}

Answer 2

媒體查詢沒有添加任何特定性，因此<p>在寬窗口中將采用CSS中最后分配的屬性。 確保特殊情況的媒體查詢在底部。

text-overflow屬性的默認值為clip 。