使用abbr元素通过CSS更改响应式文本

Question

我的任务是在小屏幕上显示缩写，在大屏幕上显示完整的术语(例如小屏幕上的"CSS“，大屏幕上的”级联样式表“)。

我可以很容易地输出这两个术语，每个术语都有一个类，并根据媒体查询来display:none其中一个。

我在问自己，是否可以使用abbr元素，通过下面的标记以更好的方式完成这项工作：

<abbr title="Cascading Style Sheets">CSS</abbr>

下面你可以看到我用attr() CSS属性得到的，它不能正确呈现。我的问题是，从长远来看，abbr需要以某种方式进行伸展。有没有办法用CSS做到这一点？

​

@media (min-width: 500px) {
  abbr {
    display: inline-block;
    text-indent: -9999px;
  }
  abbr::before {
    content: attr(title);
    position: absolute;
    text-indent: 9999px;
  }
}

<p>
    I'm using 
    <abbr title="Cascasing Style Sheets"> CSS </abbr> 
    for responsive text changes.
</p>

​

https://codepen.io/smichaelsen/pen/VwYeZQZ

Answer 1

要做到这一点，最简单的方法是在abbr中放置一个跨度，这样您就可以使用CSS选择要隐藏的内容。它看起来像这样：

​

@media (min-width: 500px) {
  abbr {
    text-decoration: none;
  }
  abbr span {
    display: none;
  }
  abbr::before {
    content: attr(title);
  }
}

<p>
  I'm using
  <abbr title="Cascasing Style Sheets"> <span>CSS<span> </abbr> for responsive text changes.
</p>

​

或者，您可以将abbr的font-size设置为0。这样做的好处是不需要任何额外的span，但这意味着您必须显式设置abbr::before的font-size。这似乎更有可能导致头痛，但它确实相当干净。

为此，我还在content的末尾添加了一个空格，因为将font-size设置为0会有效地删除::before后面的空格。

​

@media (min-width: 500px) {
  abbr {
    font-size: 0;
    text-decoration: none;
  }
  abbr::before {
    content: attr(title) " ";
    font-size: 16px;
  }
}

<p>
  I'm using
  <abbr title="Cascasing Style Sheets"> CSS </abbr> for responsive text changes.
</p>

​

附注:我在两个示例中都添加了text-decoration: none;，因为一旦展开了缩写，您就不会希望它看起来像一个缩写。