如果没有技巧，这是不可能的。这里有一种通过用文本的图像替换文本的方法。

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

这类事情通常是用JavaScript完成的。下面是如何用jQuery完成的:

$('.pvw-title').text('new text');

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

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

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

如果您只是想显示不同的文本或图像，请保持标记为空，并将内容写入多个数据属性，如<span data-text1="Hello" data-text2="Bye"></span>。 使用一个伪类显示它们:before {content: attr(data-text1)}

现在你有很多不同的方法在它们之间切换。我将它们与媒体查询结合使用，以实现响应式设计方法，将导航的名称更改为图标。

Jsfiddle演示和示例

它可能不能完美地回答这个问题，但它满足了我的需求，也许也满足了其他人的需求。

强制性:这是一个hack: CSS不是做这件事的正确地方，但在某些情况下——例如，你在iframe中有一个只能由CSS定制的第三方库——这种hack是唯一的选择。

您可以通过CSS替换文本。让我们用CSS将一个带有单词“hello”的绿色按钮替换为一个带有单词“goodbye”的红色按钮。

之前:

后:

现场演示见http://jsfiddle.net/ZBj2m/274/:

这是我们的绿色按钮:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

现在让我们隐藏原来的元素，但随后添加另一个块元素:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

注意:

我们需要显式地将其标记为块元素，'after'元素默认为内联元素 我们需要通过调整伪元素的位置来补偿原始元素。 我们必须隐藏原始元素，并使用可见性显示伪元素。注意显示:原始元素上的none无效。

你不能，嗯，你可以。

.pvw-title:after {
  content: "Test";
}

这将在元素的当前内容之后插入内容。它实际上并不替换它，但您可以选择一个空的div，并使用CSS添加所有的内容。

虽然你或多或少可以，但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记，比如文本周围的引号应该被引用。

这适用于我的内联文本。它在Firefox、Safari、Chrome和Opera上进行了测试。

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}