如何更改<span>CSS 媒体查询中的文本</span>

Question

我正在尝试更改媒体查询中<span>元素内的文本，并且我想尽可能避免使用 JavaScript。 有没有办法只用 HTML/CSS 来做到这一点？

 @media only screen and (max-width: 768px) { header .text-1 { /* property here? */ } header .text-2 { /* property here? */ } }

 <header> <div class="banner"> <span class="text-1">COLMAR</span> <!-- change to "C" --> <span class="text-2">ACADEMY</span> <!-- change to "A" --> </div> </header>

当窗口宽度小于 768px 时，我希望<header>的两个<span>被缩写为一个字符（“C”和“A”）。

我在W3 上寻找可以做到这一点的属性，类似于（我认为）JavaScript 的.innerHtml ，我找到了content ，但它似乎没有做我想要的。

如果需要，我愿意使用 JavaScript，如果它只需要几行 CSS，我只想避免它。

Answer 1

您可以在 CSS 中设置span标签的宽度。 为了能够使用宽度，您需要display:block; . 您使用overflow:none; 隐藏文本的其余部分。

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

 @media only screen and (max-width: 768px) { header .text-1, header .text-2{ width: 11px; overflow: hidden; display:inline-block; } }

 <header> <div class="banner"> <span class="text-1">COLMAR</span> <!-- change to "C" --> <span class="text-2">ACADEMY</span> <!-- change to "A" --> </div> </header>

Answer 2

这是另一种使用::before伪元素的方法（加上包装在另一个跨度中的原始内容），但使用自定义数据属性来定义替代文本，而不必为每次出现添加一个类。 例如，这允许通过 CMS 填充文本。

 @media only screen and (max-width: 768px) { [data-alttext] > span { display: none; } [data-alttext]::before { content: attr(data-alttext); } }

 <header> <div class="banner"> <span class="text-1" data-alttext="C"><span>COLMAR</span></span> <!-- change to "C" --> <span class="text-2" data-alttext="A"><span>ACADEMY</span></span> <!-- change to "A" --> </div> </header>

Answer 3

您可以像这样使用伪选择器:before ：

 header .text-1:before { content: "COLMAR"; } header .text-2:before { content: "ACADEMY"; } @media only screen and (max-width: 768px) { header .text-1:before { content: "C"; } header .text-2:before { content: "A"; } }

 <header> <div class="banner"> <span class="text-1"></span> <!-- change to "C" --> <span class="text-2"></span> <!-- change to "A" --> </div> </header>

在进行了一些研究之后，您也不会因为这种方法而失去任何可访问性。