如何用CSS替换文本？

ゞ浴缸里的玫瑰 2022-11-27 07:10 217阅读 0赞

本文翻译自：[How can I replace text with CSS?][How can I replace text with CSS]

*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>`

*I need to replace "Facts".* **我需要替换“事实”。**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/x8dk/如何用CSS替换文本][https_stackoom.com_question_x8dk_CSS]

--------------------

### \#2楼 ###

*Or maybe you could wrap 'Facts' round a `<span>` as follows:* **或者，您可以将“事实”环绕在`<span>` ，如下所示：**

<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';
    }

--------------------

### \#3楼 ###

***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.* **您可以通过CSS替换文本。** ***Let's replace a green button with 'hello' with a red button that says 'goodbye'** , using CSS.* **让我们使用CSS 将绿色按钮“ hello”替换为红色按钮“ goodbye” 。**

*Before:* **之前：**

[![在此处输入图片说明][VGS41.png]][VGS41.png]

*After:* **后：**

[![在此处输入图片说明][dD170.png]][dD170.png]

*See [http://jsfiddle.net/ZBj2m/274/][http_jsfiddle.net_ZBj2m_274] for a live demo:* **观看[http://jsfiddle.net/ZBj2m/274/][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` .* **我们必须隐藏原始元素，并使用`visibility`显示伪元素。** *Note `display: none` on the original element doesn't work.* **注意`display: none`原始元素上的所有元素均不起作用。**

--------------------

### \#4楼 ###

*Based on [mikemaccana's answer][mikemaccana_s answer] , this worked for me* **根据[mikemaccana的回答][mikemaccana_s answer] ，这对我[有用][mikemaccana_s answer]**

button { position: absolute; visibility: hidden; } button:before { content: "goodbye"; visibility: visible; }

*[§ Absolute positioning][Absolute positioning]* **[绝对定位][Absolute positioning]**

> *an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.* **绝对定位的元素将从流中移出，因此在放置其他元素时不占用空间。**

--------------------

### \#5楼 ###

*This worked for me with inline text.* **这对我来说适合内联文本。** *Tested in FF, Safari, Chrome and Opera* **经过FF，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; 
    }

--------------------

### \#6楼 ###

*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示例][JSFiddle Example]**

[How can I replace text with CSS]: https://oldbug.net/q/x8dk/How-can-I-replace-text-with-CSS
[https_stackoom.com_question_x8dk_CSS]: https://stackoom.com/question/x8dk/%E5%A6%82%E4%BD%95%E7%94%A8CSS%E6%9B%BF%E6%8D%A2%E6%96%87%E6%9C%AC
[VGS41.png]: https://i.stack.imgur.com/VGS41.png
[dD170.png]: https://i.stack.imgur.com/dD170.png
[http_jsfiddle.net_ZBj2m_274]: http://jsfiddle.net/ZBj2m/274/
[mikemaccana_s answer]: https://stackoverflow.com/a/14261898
[Absolute positioning]: http://developer.mozilla.org/en-US/docs/Web/CSS/position
[JSFiddle Example]: http://jsfiddle.net/jvandyke/U52Tt/