Question

I have an overflowing paragraph cut to one line when it's below a 768px viewport:

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

I want to get the full paragraph to show again for a viewport over 768px. How do I override this for a media query above 768px? The text gets all wonky and I can't seem to get the full paragraph by reverting the other properties below. I don't know what to do about text-overflow. I tried "none" but there doesn't seem to be a value for that.

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

Thank you!

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

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

How do I override text-overflow for a media query in css?

2 个答案:

所以要么

或