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

Question

我想在小屏幕上使用天数的缩写。
例如，当屏幕缩小时，我想将'Saturday'更改为'Sat' 。
我怎样才能做到这一点？

Answer 1

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

更多关于 CSS 媒体查询

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>

Answer 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 函数只是为了测试，根据需要使用任何人或两者。

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

现在文本将在 600px 屏幕大小上调整，但溢出将更改为省略号（...）。 您也可以将 text-overflow 设置为 clip，则不会显示省略号。 它会简单地剪辑。 当显示文章的片段并且您不想在示例显示上显示整个文本时，这会很有用。

希望这可以帮助某人。 干杯！！

Answer 5

我为链接做了这样的事情：

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

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

问题描述

5 个解决方案

解决方案1
48 已采纳 2016-10-06 11:14:06

解决方案2
10 2016-10-06 11:09:48

解决方案3
5 2016-10-06 11:43:14

解决方案4
0 2020-03-19 10:31:18

解决方案5
0 2023-01-30 20:22:20

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

问题描述

5 个解决方案

解决方案1 48 已采纳 2016-10-06 11:14:06

解决方案2 10 2016-10-06 11:09:48

解决方案3 5 2016-10-06 11:43:14

解决方案4 0 2020-03-19 10:31:18

解决方案5 0 2023-01-30 20:22:20

解决方案1
48 已采纳 2016-10-06 11:14:06

解决方案2
10 2016-10-06 11:09:48

解决方案3
5 2016-10-06 11:43:14

解决方案4
0 2020-03-19 10:31:18

解决方案5
0 2023-01-30 20:22:20