如何在css中覆盖媒体查询的文本溢出？

Question

当它低于768px视口时，我有一个溢出的段落切成一行：

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

我希望再次显示完整段落以显示超过768px的视口。如何覆盖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中。

So either

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

Or

.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中最后分配的属性。确保您的特殊情况媒体查询位于底部。

The default value for the text-overflow property is clip.