Question

我想在小屏幕尺寸中使用天数的缩写例如，当屏幕缩小时，我想将'星期六'更改为'星期六'。
我怎么能这样做？

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 short text and show full text
@media (max-width: 1200px) {
    .short-text { display: inline-block; }
    .full-text { display: none; }
}

将 1200px 替换为目标解决方案断点。

More on CSS media queries

Answer 2

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

按“完整页面”并调整到500px以下以查看实际操作。

这种方法的好处是：

所有内容都在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>

Answer 3

您可以将Jquery用于此

＆＃13;

<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>

＆＃13;

这里我放置了两个函数.ready（）和.resize，我使用resize函数进行测试，根据需要使用任何一个或两个函数。

Answer 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像素的屏幕尺寸上进行调整，但是溢出将更改为省略号（...）。您还可以将文本溢出设置为clip，这样就不会显示省略号。它将简单地剪辑。当显示文章的摘要并且您不想在示例显示中显示整个文本时，这很有用。

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

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

4 个答案: