我找到了一个这样的解决方案，在较小的屏幕宽度上，一个单词“Dark”将被缩短为“D”。基本上，您只需使原始内容的字体大小为0，并将缩短的形式作为伪元素。

在这个例子中，改变发生在hover上:

跨度{ 字体大小:12 px; ｝ 跨度:{后 显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; ｝ 跨度:{徘徊 字体大小:0 px; ｝ 跨度:徘徊:{后 显示:内联; ｝ 黑暗< span > < / span >

我用了这个技巧:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

我甚至用它来处理页面的国际化，只需要改变一个基类…

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

如果您愿意使用伪元素并让它们插入内容，您可以执行以下操作。它不假设原始元素的知识，也不需要额外的标记。

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

JSFiddle例子

很多人都说这是黑客。然而，我想添加更多最新的黑客，这利用了flexbox和rem的优势，即。

您不希望手动定位要更改的文本，这就是为什么您希望利用flexbox 您不希望显式地使用px对文本使用填充和/或边距，这对于不同设备和浏览器上的不同屏幕大小可能会给出不同的输出

这里是解决方案，简而言之，flexbox确保它自动定位完美，rem是更标准化(和自动化)的像素替代方案。

codeandbox带有下面的代码，并以截图的形式输出，请务必阅读下面的代码说明!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

注意:对于不同的标签，你可能需要不同的rem值，这个值只适用于h1，并且只适用于大屏幕。但是使用@media，你可以很容易地将其扩展到移动设备。

我找到了一个这样的解决方案，在较小的屏幕宽度上，一个单词“Dark”将被缩短为“D”。基本上，您只需使原始内容的字体大小为0，并将缩短的形式作为伪元素。

在这个例子中，改变发生在hover上:

跨度{ 字体大小:12 px; ｝ 跨度:{后 显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; ｝ 跨度:{徘徊 字体大小:0 px; ｝ 跨度:徘徊:{后 显示:内联; ｝ 黑暗< span > < / span >

实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方，因此这将不会隐藏更改的文本。

之前使用的例子:

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}