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

【问题标题】：How to change text (not font size) according to screen size in CSS?如何根据 CSS 中的屏幕大小更改文本（不是字体大小）？
【发布时间】：2017-02-15 02:21:32
【问题描述】：

我想在小屏幕尺寸中使用天数的缩写。
例如，当屏幕缩小时，我想将 'Saturday' 更改为 'Sat'。
我该怎么做？

【问题讨论】：

使用@media 查询来实现这一点
我正在使用@media 更改字体大小，但如何访问特定组件并更改其文本？
您应该已经在 HTML 中拥有这两个值，然后根据屏幕宽度显示/隐藏相应的值。另一种方法是使用 :after 注入内容并使用 CSS 媒体查询更改此内容。
“缩写”和普通字符串可以使用两种不同的元素，那么您当然可以使用 CSS 实现

标签： javascript css media-queries

【解决方案1】：

使用::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>

【讨论】：

【解决方案2】：

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

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 替换为您的目标分辨率断点。

More on CSS media queries

【讨论】：

【解决方案3】：

您可以为此使用 Jquery

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   if($( window ).width() < 767){
       $("p").text("Sat");
   }else{
       $("p").text("Saturday");
   }
});
$( window ).resize(function() {
	if($( window ).width() < 767){
       $("p").text("Sat");
   }else{
       $("p").text("Saturday");
   }
});
</script>
</head>
<body>
<p>Saturday</p>
</body>
</html>

这里我放置了两个函数 .ready() 和 .resize，我使用 resize 函数只是为了测试，根据需要使用任何一个或两个。

【讨论】：

【解决方案4】：

您也可以这样做。但请注意，这将根据屏幕大小剪掉内容。但如果你不想剪掉某些字母，那么这可能不是你想要的。

所以要剪掉内容，请这样做。

HTML
<p>Saturday</p>

CSS
p {
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and only (max-width: 600px) {
p {
  width: 60px;
 }
}

现在文本将在 600 像素的屏幕尺寸上进行调整，但溢出将更改为省略号 (...)。您还可以将文本溢出设置为剪辑，则不会显示省略号。它只会剪辑。这在显示文章的 sn-p 并且您不想在示例显示中显示整个文本时很有用。

希望这对某人有所帮助。干杯！！

【讨论】：