时间戳

首页 > 解决方案 > 使用 abbr 元素通过 CSS 进行响应式文本更改

html - 使用 abbr 元素通过 CSS 进行响应式文本更改

问题描述

我的任务是在小屏幕上显示缩写，在大屏幕上显示完整术语（例如，小屏幕上的“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

标签： htmlcssaccessibilityresponsive

解决方案

最简单的方法是在其中放置一个跨度，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>

或者，您可以将font-sizeof设置abbr为 0。这具有不需要任何额外spans 的优点，但这确实意味着您必须显式设置font-sizeof abbr::before。这似乎更容易引起头痛，但它确实工作得非常干净。

为此，我还在 . 的末尾添加了一个空格，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;在两个示例中都添加了，因为一旦您扩展了缩写词，您并不真的希望它看起来像缩写词。

推荐阅读