如何在CSS中根据屏幕大小更改文本(而不是字体大小)？

bxpogfeg 于 2023-02-01 发布在其他

关注(0)|答案(5)|浏览(160)

我想在小屏幕上使用日期的缩写。
例如，当屏幕缩小时，我想将**'Saturday'更改为'Sat'**。
我该怎么做呢？

css

来源：https://stackoverflow.com/questions/39894291/how-to-change-text-not-font-size-according-to-screen-size-in-css

5条答案

按热度按时间

llew8vvj1#

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

- 超文本标记语言**

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

- 中央支助组**

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

赞(0）回复(0）举报 2023-02-01

fgw7neuy2#

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

赞(0）回复(0）举报 2023-02-01

ljsrvy3e3#

您可以使用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函数只是为了测试，根据你的需要使用任何一个或两个。

赞(0）回复(0）举报 2023-02-01

zzwlnbp84#

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

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 px屏幕大小上调整，但溢出将更改为省略号（...）。您也可以将文本溢出设置为剪切，则不会显示省略号。它将只是剪切。这在显示文章的片段而您不希望在示例显示中显示整个文本时非常有用。
希望这对某人有帮助。干杯！！

赞(0）回复(0）举报 2023-02-01

az31mfrm5#

我做了这样的链接：

<a href="mailto:someEmail@gmail.com" class="link"></a>

然后设置带有媒体查询的文本。

@media (min-width: 250px) {
    .link::after {
        content: 'someEmail@gmail.com'
    }
}

@media (max-width: 249px){
    .link::after {
        content: 'Email'
    }
}

赞(0）回复(0）举报 2023-02-01

我来回答

如何在CSS中根据屏幕大小更改文本(而不是字体大小)？

5条答案

相关问题

热门标签

最新问答