使用CSS将字符添加到移动版本的文本中。

Question

我的网站上有一个文本块：

特种试剂

<h1>Specialtyreagents</h1>

我可以在CSS中添加一个-符号到这个块中，所以它应该如下所示：

特种试剂

我只能在我的情况下使用CSS！

谢谢你的帮助。

Answer 1

在手机上使用你想要的单词的伪元素，并使用字体大小隐藏或显示它。

示例

码页

​

h1:after {
  content: 'Specialty-reagents';
  font-size: 0;
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 0;
  }
  h1:after {
    font-size: 32px;
  }
}

<h1>Specialtyreagents</h1>

​

Answer 2

使用CSS，您不能包含这个-，但是如果您需要在特定的情况下使用它，您可以使用伪元素再次编写这样的文本：

​

h1 {
  font-size: 0;
}
h1:before {
  content: "Specialty-reagents";
  display: block;
  font-size: 1.5rem;
}

<h2>Specialtyreagents</h2>
<h1>Specialtyreagents</h1>

​

Answer 3

在漫长的旅途中，您可以有两个html元素，一个用于移动，另一个用于桌面：

<h1 class="desktop">Specialtyreagents</h1>

和

<h1 class="mobile" >Specialty-reagents</h1>

然后，您应该有一些css代码来处理它：

.desktop {
    display: block;
}
.mobile {
    display: none;
}

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