html - 使用 css 将 <span> 中的一个词显示为另一个词

Question

例如，这个词是国际。

例如，我想为手机做这样的事情:

<span class="word-international">International</span>

然后手机的样式如下:

.word-international{
    content:"Int'l";
}

出于明显的空间原因(和 SEO 原因)。这行不通，但我似乎记得有一些方法可以做到这一点，我只是不记得标记中的特定 HTML 标记或属性，比如 - 谢谢!

Answer 1

CSS content 属性只对 :before, :after 伪元素有效，对直接元素无效。所以你可以做这样的事情

HTML

<span class="test">
    <span>Hello</span>
</span>

CSS

@media only screen and (max-width: 767px) {
  .test span {
      display:none;
  }
  .test:after {
    content: "Test";
  }
}

如果您使用的是移动设备优先的方法，请相应地更改 css，希望这对您有所帮助