如何用CSS替换文本?


321

如何使用以下方法将文本替换为CSS:

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

代替( img[src*="IKON.img"] ),我需要使用可以代替文本的东西。

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

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

我需要替换“ 事实 ”。


老实说,最好使用javascript。
爵士

使用Javascript需要加载DOM,因此有一个FOUC。我想这样做是用从查询字符串中提取的内容替换文本,同时避免了FOUC,不必生成HTML服务器端(从而允许从CDN主动缓存和提供HTML)。
nemequ '16

31
问题是如何使用CSS做到这一点。我正在使用的CMS只允许我更改CSS,这就是为什么我在来到这个页面,而谷歌搜索的答案,而不是一个不同。这就是为什么我们回答提出的问题,而不是问问问询者的情况为何没有不同的原因。
felwithe '17

Answers:


291

或者,您可以<span>按如下方式包装“事实” :

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

然后使用:

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

52
很好,但这是对HTML的更改,而不仅仅是CSS。
mikemaccana 2013年

22
有时它是您唯一的选择
locrizak 2014年

4
跨度{display:none; }还应隐藏伪元素。您应该使用可见性:隐藏
-xryl669

2
显示:无;和可见性:隐藏;都隐藏了伪元素
Facundo Colombier 2015年

10
@Mathew隐藏了跨度,但将伪元素添加到div中,因此不应隐藏伪元素(通过使用可见性或显示属性)
dewtea 2015年

249

必须的:这是一种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;
}

注意:

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

2
这不适用于IE 10,您知道如何对其进行修改吗?
Solmead

49
display: none;之所以不起作用,是因为::after如果有人好奇,它的真正含义是“在元素内部,但最后”。
Ry-

4
不幸的是,“修改”按钮不再像按钮一样工作。这是一个很好的例子,只是它不适用于按钮。
xryl669

1
显示:无;和可见性:隐藏;都隐藏了伪元素
Facundo Colombier 2015年

为什么我将其替换为元素但文本全部大写且无法更改为小写呢?
Jpaji Rajnish 2015年

158

如果您愿意使用伪元素并让它们插入内容,则可以执行以下操作。它不假定您了解原始元素,并且不需要其他标记。

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


1
此答案可以在其他答案不多的地方使用,例如<th>元素内的文本节点。
克里斯·克瑞克斯

5
这很好。在我的情况,line-height: 0color: transparent在主元素和伪复位这些值做的工作(没有摆弄text-indent
dontGoPlastic

1
它不应该是line-height: normal不是initial
本杰明

1
使用text-indent的原因是,如果原始文本较长,则该元素将保留旧文本的大小,而不会缩小到新文本的大小(假设这就是您想要的)
Chris Janssen

文字缩进:-9999px;在IE上工作。可见度:隐藏;方法不适用于IE。
汤姆·塞特米兹

57

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

button {
  position: absolute;
  visibility: hidden;
}

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

绝对定位

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


2
对我来说,此答案优于其他答案,因为它可以在同一行中替换文本,也就是说,它不会强制文本换行(对于我的HTML和CSS特定组合)。
pgr

30

这是简单,简短和有效的。无需其他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 */
    }

我必须这样做才能替换WooCommerce面包屑(而不是首页)的链接文本

无礼 /

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

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

22

你不能,你可以。

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

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

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


我非常确定自己使用代码将那种方法替换为文本。.'<div class =“ pvw-title”>事实</ div> <div class =“ pvw-title”>事实</ div>'我不能使用:after,因为我有多个同名的div类:(
MokiTa 2011年

与浏览器的兼容性如何?我怀疑从长远来看,JavaScript将是这种灵活性的更好选择。
爵士

现代浏览器支持它。我不确定较旧的IE版本,但我想可以在quirksmode.com上查找。-edit-它可以:quirksmode.org/css/user-interface/content.html
GolezTrol 2013年

15

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

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

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

按钮文字:

  1. :before

    大屏幕xxx

    大屏幕

  2. :after

    xxx大萤幕

    大屏幕


11

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

现在,您可以使用多种方法在它们之间进行切换。我将它们与媒体查询结合使用,以进行响应式设计,从而将导航名称更改为图标。

jsfiddle演示和示例

它可能无法完美回答问题,但它满足了我的需求,也许也满足了其他需求。



9

这对我来说适合内联文本。它已经在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;
}

2
至少在IE 9至11中对我不起作用,因为它忽略了:after元素上的“ visibility:visible”:stackoverflow.com/questions/17530947/…–
thenickdude

8

我使用这个技巧:

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

我什至通过更改基类就使用它来处理页面的国际化...

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

3
对于使用屏幕阅读器的用户来说,这是个问题。如果您不更改元素的显示/可见性并且不提供任何aria提示,则屏幕阅读器可能仍会读取您的“不可见”文本。
出色的编译器

8

用伪元素和CSS可见性替换文本

的HTML

<p class="replaced">Original Text</p>

的CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

3

使用伪元素,此方法不需要了解原始元素,也不需要任何其他标记。

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

2

这实现了一个复选框作为按钮,根据其“已选中”状态显示是或否。因此,它演示了一种使用CSS替换文本而无需编写任何代码的方法。

就返回(或不返回)POST值而言,它的行为仍像复选框一样,但是从显示角度看,它看起来像一个切换按钮。

颜色可能不符合您的喜好,它们只是用来说明问题。

HTML是:

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

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

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


2

与我在其他每个答案中看到的不同,您无需使用伪元素即可将标签的内容替换为图像

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

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

2
从CSS2开始,content仅适用于:before:after。CSS3将其扩展到所有内容,但是Generated Content模块仍处于草稿状态,因此任何使用都有可能取决于浏览器。
mrec

1
什么是“平衡”?我认为不是1.(欧洲火车控制系统)电子信标或应答器放置在铁轨之间。(请通过编辑您的问题作答,而不是在评论中。)
Peter Mortensen

1

没有技巧,这实际上是不可能的。这是一种通过用文本图像替换文本的方法。

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

这种类型的事情通常是用JavaScript完成的。这是使用jQuery的方法:

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

3
我也不能使用Javascript:/
MokiTa,2011年

1
这是我认为可行的唯一方法:.pvw-title span [style * =“ color:#000,font-size:14px;”] {可见性:隐藏;} .pvw-title span [style * =“ color:#000; font-size:14px;”]:之后{能见度:可见;颜色:#000; font-size:14px; 内容:“测试”;},但由于它们都使用相同的样式,所以我无法做到这一点..:/
MokiTa 2011年

为什么要根据颜色/字体选择它?
内森·马努索斯

我会根据整个样式来选择它,因此我可以编辑该特定标题,而不是两者,因为两者都具有相同的“ div”名称。
MokiTa 2011年

1

我遇到了必须替换链接文本的问题,但是我无法使用JavaScript,也无法直接更改超链接的文本,因为它是从XML编译下来的。另外,我不能使用伪元素,否则当我尝试使用伪元素时它们似乎不起作用。

基本上,我将想要的文本放入跨度中,并将锚标记置于其下方,并将二者都包裹在div中。我基本上是通过CSS向上移动了定位标记,然后使字体透明。现在,当您将鼠标悬停在跨度上时,它的作用就像一个链接。这样做的方式确实很怪异,但这就是您可以使用不同文本的链接的方式...

这是我如何解决此问题的方法

我的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>

我的CSS

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

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


1
@Almight为什么我怀疑这被否决了,因为此解决方案需要修改标记,并且我怀疑OP是否可以修改标记,他/她将直接更改文本。换句话说,OP需要仅CSS解决方案
dannie.f

1

我找到了这样的解决方案,其中在较小的屏幕宽度上,将“ Dark”(短)字缩短为“ D”。基本上,您只需将原始内容的字体大小设为0,并将缩写形式作为伪元素即可。

在此示例中,更改发生在悬停时:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}
<span>Dark</span>


1

八年后,我在尝试使用“ 时尚”时遇到了同样的挑战浏览器扩展程序更改网站(不是我的网站)上的内容。这次我通过使用“检查元素”查看源代码来使其工作,并基于此创建了CSS代码。

这是以前的样子:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

这是我用来修改样式的HTML和CSS的同一部分:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}
<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

您可以运行上面的代码,然后您会看到它有效(已在Chrome中测试)。


这只是我问这个问题的时候想要的。

我在使用某种社区博客/ Myspace类似的东西,而样式设置个人资料时,您唯一拥有的就是他们的CSS编辑器,这就是为什么我想根据样式选择它的原因。

我在这里找到了答案:


0

进行此工作的方法是将行高添加到CSS内容中。这将使块在隐藏上方可见,因此不会隐藏更改后的文本。

之前使用示例:

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

0

好吧,正如许多人所说,这是黑客。但是,我想添加更多最新的hack,它利用flexbox和的优势rem,即

  • 您不想手动定位要更改的文本,这就是为什么要利用 flexbox
  • 您不想使用padding和/或margin使用显式使用文本px,这对于不同设备和浏览器上的不同屏幕尺寸可能会产生不同的输出

简而言之,这就是解决方案,请flexbox确保它能够自动完美定位,并且rem是像素的更加标准化(和自动化)的替代方案。

CodeSandbox及其下面的代码以屏幕截图的形式输出,请阅读note下面的代码!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

注意:对于不同的标记,您可能需要使用的不同值rem,并且该值h1仅在大屏幕上才适用。但是,有了它,@media您可以轻松地将其扩展到移动设备。

hack如何使用CSS替换HTML文本

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.