Question

因此，例如国际这个词。

我想为手机做类似的事情：

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

然后为手机设置如下样式：

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

出于明显的空间原因（和SEO原因）。这不起作用，但我似乎记得有一些方法可以做到这一点，我只是不记得标签中的特定HTML标签或属性，类似于＆lt; abbr＆gt; - 谢谢！

Answer 1

Css内容属性仅适用于：before，：在伪元素之后，它不会对直接元素起作用。所以你可以做这样的事情

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，希望这有帮助

Answer 2

如果你真的需要在物理上改变同一元素中的内容，我可以想到一种方法来做到这一点。您必须为移动设备创建一个伪元素

@media (max-width:720px) {
   .word-international::before {
       content:"Int'l";
       font-size:12px;
    }
   .word-international {
       font-size:0px; //hide text only. if you hide whole element the pseudoelement won't be visible as well.
    }
}

但我建议使用一些j来更改元素的内容，或者更好地使用类mobile和desktop的两个元素，并使用媒体查询来显示/隐藏它们

@media (max-width:720px) {
   .word-international.mobile {
       display: block;
    }
    .word-international.desktop {
       display: none;
    }
}
@media (min-width:721px) {
   .word-international.desktop {
       display: block;
    }
    .word-international.mobile {
       display: none;
    }
}

这是通常的方式。

使用css在<span>中显示一个单词作为另一个单词

2 个答案: