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>

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

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

我愿意在必要时使用JavaScript，如果CSS中只需要几行代码，我只是想避免使用它。

Answer 1

您可以这样使用伪选择器: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>

做完research后，使用这种方法也不会失去任何可访问性。

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

您可以在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>

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

3 个答案: