如何根据 CSS 中的屏幕大小更改文本（不是字体大小）？

Question

我想在小屏幕上使用天数的缩写。

例如，当屏幕缩小时，我想将 ‘Saturday’ 更改为 ‘Sat’ 。

我怎样才能做到这一点？

原文由 Ahmet AY 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有 2 个带有完整字符串和短字符串的跨度，然后当低于目标分辨率时，使用媒体查询在它们之间交换：

HTML

 <span class="full-text">Saturday</span>
<span class="short-text">Sat</span>

CSS

 // Hide short text by default (resolution > 1200px)
.short-text { display: none; }

// When resolution <= 1200px, hide full text and show short text
@media (max-width: 1200px) {
    .short-text { display: inline-block; }
    .full-text { display: none; }
}

将 1200px 替换为您的目标分辨率断点。

更多关于 CSS 媒体查询

原文由 George Kagan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 ::after 的示例。不确定屏幕阅读器等是否可以访问它。

按“整页”并将大小调整到 500 像素以下以查看实际效果。

这种方法的好处是：

• 所有内容都在 html 文件中，不在css中
• 我 认为 只隐藏日期标签而不删除其内容，可以避免一些可访问性问题

 @media screen and (max-width: 500px) {
    /* Add a pseudo element with the
       text from attribute 'data-abbr' */
    .day[data-abbr]::after {
        content: attr(data-abbr);
    }

    /* Hide the original label */
    .day > span { display: none; }
}

 <div class="day" data-abbr="sat">
    <span>Saturday</span>
</div>

<div class="day" data-abbr="sun">
    <span>Sunday</span>
</div>

原文由 user3297291 发布，翻译遵循 CC BY-SA 3.0 许可协议