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

Question

当它低于 768px 视口(viewport)时，我有一个溢出的段落被剪切成一行:

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

我想让整个段落再次显示超过 768 像素的视口(viewport)。 如何为超过 768 像素的媒体查询覆盖它？ 文本变得不稳定，我似乎无法通过恢复下面的其他属性来获得完整的段落。我不知道如何处理文本溢出。我试过“无”，但似乎没有相应的值(value)。

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