如何用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 * = "圣像。我需要用一些可以替代文本的东西。

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

我必须用[]来让它工作。

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

< div class = " pvw-title " > < / div >的事实

I need to replace "Facts".

我需要替换“事实”。

16 个解决方案

#1

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

或者你也可以把“事实”写在下面:

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

#2

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. See http://jsfiddle.net/ZBj2m/274/ for a live demo:

可以通过CSS替换文本。让我们用“hello”替换一个绿色的按钮，用一个红色的按钮，用CSS说再见。现场演示请参见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:

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

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 span by default
• 我们需要明确地将其标记为块元素，“after”元素默认为span
• 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: none on the original element doesn't work.
• 我们必须隐藏原始元素并使用可见性显示伪元素。注意显示:原始元素上没有一个不能工作。

#3

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.

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

.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例子

#4

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.

一个被放置的元素绝对被移出了流，因此在放置其他元素时没有占用空间。

#5

Simple, Short, Effective. No additional html 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 woocommerce breadcrumbs

我必须这样做，以取代链接文本，而不是home，为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;
}

#6

Try using :before and :after . One inserts text after html is rendered, 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

1):

big screenxxx

大screenxxx

big screen

大屏幕

2) with :after

2):

xxxbig screen

xxxbig屏幕

big screen

大屏幕

#7

You can't, well, you can.

你不能，你可以。

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

This will insert content after the 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属性主要用于小型标记，如应该出现引号的文本周围的引号。

#8

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

#9

I use this trick:

我使用这个技巧:

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

I've even used this to handle internationalization of pages by just changing a base class...

我甚至通过改变基类来处理页面国际化……

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

#10

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

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

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

因此，如果您只想显示不同的文本或图像，请保持标记为空，并将内容写入多个数据属性，如。用伪类之一显示它们: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示范和例子

#11

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

我最好设置外元素的字体大小:0，以及:after selector的字体大小。

#12

This implements a checkbox as a button which shows either Yes or No depending on its 'checked' state. So it demonstrates one way of replacing text using CSS without having to write any code.

这实现了一个复选框作为一个按钮，根据它的“勾选”状态显示“是”或“否”。因此，它演示了一种不用编写任何代码就可以使用CSS替换文本的方法。

It will still behave like a checkbox as far as returning (or not returning) a POST value, but from a display point of view it looks like a toggle button.

在返回(或不返回)POST值时，它仍然像一个复选框，但从显示的角度来看，它看起来像一个切换按钮。

The colours may not be to your liking, they're only there to illustrate a point.

颜色可能不是你喜欢的，它们只是为了说明一点。

The HTML is:

HTML是:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

...and the CSS is:

…CSS是:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

I've only tried it on Firefox, but it's standard CSS so it ought to work elsewhere.

我只在Firefox上试用过，但它是标准的CSS，应该可以在其他地方使用。

#13

This isn't really possible without tricks. Here is a way that works by replacing the text with an image of text.

没有技巧这是不可能的。这是一种用文本图像替换文本的方法。

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

This type of thing is typically done with Javascript. Here is how it can be done with jQuery:

这种类型的事情通常是用Javascript完成的。以下是如何使用jQuery完成的:

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

#14

Using a pseudo element, this method doesn't require knowledge of the original element and doesn't require any additional markup.

使用伪元素，该方法不需要了解原始元素，也不需要任何附加标记。

#someElement{
    color: transparent; /*you may need to change this color*/
    position: relative;
}
#someElement:after { /*or use :before if that tickles your fancy*/
    content:"New text";
    color:initial;
    position:absolute;
    top:0;
    left:0;
}

#15

I had an issue where I had to replace the text of link but couldn't use javascript nor could I directly change the text of a hyperlink as it was compiled down from XML. Also, I couldn't use pseudo elements, or they didn't seem to work when I had tried them.

我有一个问题，我必须替换链接的文本，但不能使用javascript，也不能直接更改从XML编译的超链接的文本。另外，我不能使用伪元素，或者当我尝试它们时，它们似乎不起作用。

Basically, I put the text I wanted into a span and put the anchor tag underneath it and wrapped both in a div. I basically moved the anchor tag up via css and then made the font transparent. Now when you hover over the span, it "acts" like a link. A really hacky way of doing this, but this is how you can have a link with different text...

基本上，我把我想要的文本放到一个span中，把锚标记放在它下面，并把它们都包装在一个div中。现在，当您悬停在span上面时，它就像一个链接一样“运行”。这是一种非常陈腐的做法，但这是你可以使用不同文本的链接……

This is a fiddle of how I got around this issue

这是我解决这个问题的方法。

My HTML

我的HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

My CSS

我的CSS

 div.field a {
     color:transparent;
     position:absolute;
     top:1%;
 }
 div.field span {
     display:inline-block;
 }

The CSS will need to change based off your requirements, but this is a general way of doing what you are asking.

CSS将需要根据您的需求进行更改，但这是执行您所要求的一般方法。

Edit: Can someone tell me why this was downvoted? My solution works...

编辑:有人能告诉我为什么这个被否决了吗?我的解决方案工作…

#16

Unlike what I see in every single other answer, you don't need to use pseudo elements in order to replace the content of a balise with an image

不同于我在每个单独的答案中看到的，您不需要使用伪元素来用图像替换balise的内容

Facts

div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}