Html 如何改变<；span>；CSS媒体查询中的文本

我试图在媒体查询中更改

元素中的文本，如果可能，我希望避免使用JavaScript。有没有一种只使用HTML/CSS的方法可以做到这一点

@仅媒体屏幕和（最大宽度：768px）{
标题.text-1{
/*这里的财产*/
}
标题.text-2{
/*这里的财产*/
}
}

科尔马
学院

您可以使用伪选择器

：before

，如下所示：

header.text-1:之前{
内容：“科尔马”；
}
标题。文本-2：之前{
内容：“学院”；
}
@仅介质屏幕和（最大宽度：768px）{
页眉.文本-1:之前{
内容：“C”；
}
标题。文本-2：之前{
内容：“A”；
}
}

---

您可以在CSS中设置

span

标记的宽度。要使用宽度，您需要

display:block。您使用
溢出：无
隐藏文本的其余部分

跨距的宽度必须取决于字体大小和字体系列。使用单空格字体会有所帮助，因为所有字符的宽度都相同


@仅媒体屏幕和（最大宽度：768px）{
标题.text-1，
标题.text-2{
宽度：11px；
溢出：隐藏；
显示：内联块；
}
}

科尔马
学院
这里有另一种方法使用
：：before
伪元素（加上另一个span中包装的原始内容），但使用自定义数据属性定义替代文本，而不必为每次出现添加类。例如，这允许通过CMS填写文本


@仅媒体屏幕和（最大宽度：768px）{
[data alttext]>span{
显示：无；
}
[数据alttext]：：之前{
内容：attr（数据文本）；
}
}

科尔马
学院
非常好的方法！我自己也用过这句话，但到了回答这个问题的时候，我还是一无所获。使用
：before
lol依赖肌肉记忆。这很有趣，我复制/粘贴了代码，但似乎不起作用。它似乎复制了每个
（屏幕截图）的文本。请在jsbin或codepen上发布一个工作示例来演示您的问题。我无法从屏幕截图进行调试，代码在我提供的代码段中运行良好。我打开了一个代码笔，现在我尝试的工作正常。目前，我已经建立了詹妮弗·冈卡尔维斯的例子，而且很有效。刚刚意识到Chrome仿真被破坏了，这就是问题所在。很抱歉耽误了您的时间，但感谢您提供的解决方案！我试过了，但由于某种原因它不起作用，我也没有收到任何错误。你一字不差地复制了这个答案？是的，我复制了它，并仔细检查了所有内容。奇怪。你在调整你的屏幕以真正看到变化吗？我在Chrome开发者工具中使用模拟。