如何用 CSS 替换文本？

How can I replace text with CSS?

提问by MokiTa

How can I replace text with CSS using a method like this:

如何使用这样的方法用 CSS 替换文本：

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

Instead of ( img[src*="IKON.img"]), I need to use something that can replace text instead.

而不是 ( img[src*="IKON.img"])，我需要使用可以替换文本的东西。

I have to use []to get it to work.

我必须使用[]它才能正常工作。

<div class="pvw-title">Facts</div>

<div class="pvw-title">Facts</div>

I need to replace "Facts".

我需要替换“事实”。

回答by Matthew Cachia

Or maybe you could wrap 'Facts' round a <span>as follows:

或者，也许您可​​以<span>按如下方式将“事实”括在 a中：

<div class="pvw-title"><span>Facts</span></div>

Then use:

然后使用：

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

回答by mikemaccana

Obligatory: This is a hack: CSS isn't the right place to do this, but in some situations - eg, you have a third party library in an iframe that can only be customized by CSS - this kind of hack is the only option.

强制性：这是一个 hack：CSS 不是执行此操作的正确位置，但在某些情况下 - 例如，您在 iframe 中有一个只能由 CSS 自定义的第三方库 - 这种 hack 是唯一的选择.

You can replace text through CSS. Let's replace a green button with 'hello' with a red button that says 'goodbye', using CSS.

您可以通过 CSS 替换文本。让我们使用 CSS将绿色按钮替换为 'hello' 红色按钮，显示 'goodbye'。

Before:

前：

After:

后：

See http://jsfiddle.net/ZBj2m/274/for a live demo:

有关现场演示，请参见http://jsfiddle.net/ZBj2m/274/：

Here's our green button:

这是我们的绿色按钮：

<button>Hello</button>

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

Now let's hide the original element, but add another block element afterwards:

现在让我们隐藏原始元素，但之后添加另一个块元素：

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

Note:

笔记：

• We explicitly need to mark this as a block element, 'after' elements are inline by default
• We need to compensate for the original element by adjusting the pseudo-element's position.
• We must hide the original element and display the pseudo element using visibility. Note display: noneon the original element doesn't work.

• 我们需要明确地将其标记为块元素，默认情况下'after'元素是内联的
• 我们需要通过调整伪元素的位置来补偿原始元素。
• 我们必须隐藏原始元素并使用 显示伪元素visibility。注意display: none原始元素不起作用。

回答by James van Dyke

If you're willing to use pseudo elements and let them insert content, you can do the following. It doesn't assume knowledge of the original element and doesn't require additional markup.

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

.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 Example

JSFiddle 示例

回答by Steven Penny

Based on mikemaccana's answer, this worked for me

根据 mikemaccana 的回答，这对我有用

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Absolute positioning

§ 绝对定位

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

绝对定位的元素从流中取出，因此在放置其他元素时不占用空间。

回答by hawkeye126

This is simple, short, and effective. No additional HTML is necessary.

这很简单、简短且有效。不需要额外的 HTML。

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

I had to do this for replacing link text, other than home, for WooCommercebreadcrumbs

我必须这样做来替换WooCommerce面包屑的链接文本，而不是主页

Sass/Less

Sass/更少

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

回答by GolezTrol

You can't, well, you can.

你不能，好吧，你可以。

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

This will insert content afterthe current content of the element. It doesn't actually replace it, but you can choose for an empty div, and use CSS to add all the content.

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

But while you more or less can, you shouldn't. Actual content should be put in the document. The content property is mainly intended for small markup, like quotation marks around text that should appear quoted.

但是，尽管您或多或少可以，但您不应该这样做。实际内容应放在文档中。content 属性主要用于小标记，例如应该出现引号的文本周围的引号。

回答by live-love

Try using :beforeand :after. One inserts text after HTML is rendered, and the other inserts before HTML is rendered. If you want to replace text, leave button content empty.

尝试使用:before和:after。一个在呈现 HTML 之后插入文本，另一个在呈现 HTML 之前插入。如果要替换文本，请将按钮内容留空。

This example sets the button text according to the size of the screen width.

本示例根据屏幕宽度的大小设置按钮文本。

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Button text:

按钮文字：

1. With :before

   big screenxxx

   big screen

2. With :after

   xxxbig screen

   big screen

1. 和 :before

   大屏幕xxx

   大屏幕

2. 和 :after

   xxx大屏幕

   大屏幕

回答by Robbendebiene

If you just want to show different texts or images, keep the tag empty and write your content in multiple data attributeslike that <span data-text1="Hello" data-text2="Bye"></span>. Display them with one of the pseudo classes :before {content: attr(data-text1)}

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

Now you have a bunch of different ways to switch between them. I used them in combination with media queries for a responsive design approach to change the names of my navigation to icons.

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

jsfiddle demonstration and examples

jsfiddle 演示和示例

_{It may not perfectly answer the question, but it satisfied my needs and maybe others too.}

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

回答by jerome

I had better luck setting the font-size: 0of the outer element, and the font-sizeof the :afterselector to whatever I needed.

我有更好的运气设置font-size: 0外的元素，而font-size在的:after，我需要什么选择器。

回答by Noel Williams

This worked for me with inline text. It was tested in Firefox, Safari, Chrome, and Opera.

这对内嵌文本对我有用。它在 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;
}