如何根据CSS中的屏幕大小更改文本(而不是字体大小)? [英] How to change text (not font size) according to screen size in CSS?

问题描述

我想在小屏幕尺寸中使用几天的缩写.
例如，当屏幕缩小时，我想将星期六" 更改为星期六" .
我该怎么办?

I want to use abbreviation of days in small screen size.
For example when screen is shrinked I want to change 'Saturday' to 'Sat'.
How can I do this?

推荐答案

具有2个包含完整和短字符串的跨度，然后在目标分辨率以下时，使用媒体查询在它们之间进行交换:

Have 2 spans with full and short strings, then when below target resolution, swap between them using a media query:

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 .

Replace 1200px with your target resolution breakpoint.

有关CSS媒体查询的更多信息

这篇关于如何根据CSS中的屏幕大小更改文本(而不是字体大小)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！