如何用CSS替换文本？

时间：2011-10-25 21:58:46

标签： css text replace

如何使用以下方法用css替换文本：

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

而不是（img[src*="IKON.img"]），我需要使用可替代文本的东西。

我必须使用[ ]才能让它发挥作用。

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

我需要替换“事实”。

24 个答案:

答案 0 :(得分：243)

或许您可以将{Facts'包裹在<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';
}

答案 1 :(得分：190)

强制性：这是一个黑客攻击：CSS不适合这样做，但在某些情况下 - 例如，你在iframe中有一个第三方库，只能通过CSS - 这种黑客攻击是唯一的选择。

您可以通过CSS替换文字。 让我们用'hello'替换绿色按钮，用红色按钮代替'再见'，使用CSS。

在：

enter image description here

后：

enter image description here

有关实时演示，请参阅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 :(得分：137)

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

.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

答案 3 :(得分：51)

基于 mikemaccana’s answer， 这对我有用

button {
  position: absolute;
  visibility: hidden;
}

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

§ Absolute positioning

  

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

答案 4 :(得分：28)

简单，简短，有效。不需要额外的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面包屑

SASS / LESS 

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

答案 5 :(得分：18)

你不能，嗯，你可以。 

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

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

但是当你或多或少可以，你不应该。实际内容应放在文件中。 content属性主要用于小标记，例如应引用的文本引号。

答案 6 :(得分：13)

尝试使用：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）with：before

大屏幕xxx

大屏幕

2）with：after

xxxbig screen

大屏幕

答案 7 :(得分：11)

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

因此，如果您只想显示不同的文字或图片，将标记保持为空，并将您的内容写入多个数据属性，例如<span data-text1="Hello" data-text2="Bye"></span>。 使用其中一个伪类:before {content: attr(data-text1)}

显示它们

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

jsfiddle demonstration and examples

答案 8 :(得分：9)

这对我来说有内联文字。在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 :(得分：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!';
}

答案 10 :(得分：8)

我发现的最简单的方法是创建元素 UPDATE employee AS e1 SET Join_Date = e1.Join_Date -INTERVAL '1 DAY' WHERE EXISTS ( SELECT 1 FROM employee e2 WHERE e2.EmpID = e1.EmpID AND e2.termination_date IS NOT NULL AND e2.Join_Date < e1.Join_Date ) ，然后在创建 PeekMessage(&msg, 0, 0, 0, PM_NOREMOVE); 伪时用任何字体大小覆盖它。下面的例子：

font-size: 0px

答案 11 :(得分：8)

我更幸运的是将外部元素的Cust ID, Order ID, Status, Counter 111, 123456, APPROVED, 1 111, 123457, APPROVED, 2 111, 123458, APPROVED, 3 111, 123459, DECLINED, 1 111, 123460, APPROVED, 1 111, 123461, APPROVED, 2 222, 123462, APPROVED, 1 222, 123463, APPROVED, 2 和font-size: 0选择器的font-size设置为我需要的任何内容。

答案 12 :(得分：6)

具有伪元素和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.";
}

答案 13 :(得分：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;
}

答案 14 :(得分：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所以它应该在其他地方工作。

答案 15 :(得分：1)

与我在其他每个答案中看到的不同，您不需要使用伪元素以便用图像替换应答器的内容

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

答案 16 :(得分：1)

我遇到了一个问题，我必须更换链接文本但不能使用javascript，也不能直接更改超链接的文本，因为它是从XML编译而来的。另外，我不能使用伪元素，或者当我尝试它们时它们似乎无法工作。

基本上，我把我想要的文字放入一个跨度中，然后将锚标记放在它下面并将它们包装在一个div中。我基本上通过css移动锚标签然后使字体透明。现在，当你将鼠标悬停在跨度上时，它会行动起来＆＃34;像一个链接。这是一种真正的hacky方式，但这就是你可以用不同文本链接的方式......

This is a fiddle of how I got around this issue

我的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需要根据您的要求进行更改，但这是满足您要求的一般方式。

编辑：有人可以告诉我为什么这会被投票吗？我的解决方案有效......

答案 17 :(得分：1)

示例 

<!DOCTYPE html>
<html> 
<head> 
   <title>Devnote</title>
    <style>
        .replacedValue { 
            visibility: hidden; 
            position: relative; 
        } 
        .replacedValue:after { 
            visibility: visible; 
            position: absolute; 
            top: 0; 
            left: 0; 
            content: "Devnote is developer answer solve. devnote.in"; 
        } 
    </style> 
</head>
<body> 
    <p class="replacedValue">Old Text Here</p>
</body> 
</html>

输出 

Devnote is developer answer solve. devnote.in

答案 18 :(得分：1)

八年后，当尝试使用Stylish浏览器扩展程序来更改网站（不是我的网站）上的内容时，我面临着同样的挑战。这次，我通过使用“检查元素”查看源代码来使其起作用，并基于此创建了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编辑器，这就是为什么我要根据样式选择它的原因。

我在这里找到了答案：

答案 19 :(得分：1)

很多人说这是黑客。但是，我想添加更多最新的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，您可以轻松地将其扩展到移动设备。

A hack how to replace HTML text using CSS

答案 20 :(得分：0)

为了使用after和隐藏原始内容，你可以使用这个hack：

.pvw-title {
  font-size: 0;
}
.pvw-title:after {
  font-size: 1rem;
  content: 'I am a totally different piece of text!';
}
<div class="pvw-title">Facts</div>

将 font-size 设置为 0 会使文本消失而不从视口中移除实际元素。因此，:after 选择器可以工作并且应该在所有浏览器上显示。

答案 21 :(得分：0)

我找到了这样的解决方案，其中在较小的屏幕宽度上，“暗”一词将被缩短为“ 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>

答案 22 :(得分：0)

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

使用之前的示例：

.pvw-title span {
  display: none;
}

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

答案 23 :(得分：0)

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

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

此类事情通常使用Javascript完成。以下是jQuery的完成方式：

$('.pvw-title').text('new text');
相关问题
最新问题