使用 CSS 替换文本的最佳方法 [重复]答案

【问题标题】：Best way to replace a text using CSS [duplicate]使用 CSS 替换文本的最佳方法 [重复]
【发布时间】：2012-07-30 00:52:02
【问题描述】：

我想在我的项目中替换文字“公司名称”。用例是仅通过为不同的公司维护不同的样式表来为不同的公司生成文档（在预处理之后）。

搜索引擎优化在这里并不重要。

我正在使用这种方法：

html

<span class="company-name"> YourCompanyName </span>

css

.company-name{font-size: 0}

.company-name:after{
      content: "New Company Name";
      font-size: 14px;
 }

所以这是我的快速问题：有没有更好的方法来做同样的事情，只使用 css？

【问题讨论】：

我宁愿使用 jQuery 或 PHP 来代替它，但是除了旧的互联网浏览器之外，只使用 CSS 似乎是一个很好的方法。
依赖样式表来替换内容通常是个坏主意。
是的，这就是目的。我将预处理我的 html 以生成文档。我会在我的问题中说明这一点。
同意...但我不想保留 content 的重复副本。这类似于创建一个模板，其中只有样式和次要文本会针对不同的情况进行更改。
我了解到您正在使用它来创建 PDF 文档，不关心 SEO 等，这很好，但为什么您要求“更好”的解决方案，当这个似乎已经完全按照您的意愿行事？你有问题吗？如果是这样，问题是什么？当然，您最好使用服务器端解决方案来更改所有情况下的实际标记...

标签： css

【解决方案1】：

有没有更好的方法来做同样的事情，只使用 css？

没有。其他所有效果基本上都会使用相同的方法：隐藏原始内容并用伪元素替换它（::after 或::before）。

请注意，搜索引擎可能会忽略样式表，这可能会导致一些奇怪的搜索结果。替换标记中的固定内容几乎总是一个更好的主意。在几乎所有情况下，它只需要一个简单的查找和替换。 JavaScript 和 CSS 可以停用 - 标记不能。

【讨论】：

【解决方案2】：

CSS 真的不是为这种事情而设计的。您最好使用 Javascript，甚至更好，只需更改 HTML 代码本身。

除了你已经完成的方式之外，真的没有任何其他方式可以在 CSS 中完成你所要求的事情：content 属性在大多数 CSS 样式中不可用，因为 CSS 不是预期的用于放置内容。

【讨论】：

【解决方案3】：

如果你真的需要在 CSS 中做这样的事情，以下是更合乎逻辑且风险更小的（考虑到通常的 CSS 警告）：

<style>
.company-name:after{
  content: "New Company Name";
}
</style>
<span class="company-name"></span>

也就是说，使用一个内容为空的元素，所以你不需要任何技巧来隐藏虚拟内容。

【讨论】：

+1..！我真的很喜欢这个想法，它更有意义。！但我会等待其他人回应。
如何添加新行？试过
和 \n 没有成功。谢谢
@MariusAndreiana，这是一个不同的问题，可能之前在 SO 上已经提出并回答了一个问题。但基本上你会在内容中使用\a，在伪元素上使用white-space: pre-wrap。