如何用 CSS 替换文本？

【问题标题】：How can I replace text with CSS?如何用 CSS 替换文本？
【发布时间】：2011-12-15 08:00:58
【问题描述】：

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

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

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

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

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

我需要替换“Facts”。

【问题讨论】：

  • 老实说，最好使用javascript。
  • 使用Javascript需要加载DOM，所以有FOUC。我想这样做是为了用从查询字符串中提取的内容替换文本，同时避免 FOUC 而 不必生成 HTML 服务器端（从而允许 HTML 被积极缓存并从 CDN 提供） .
  • 问题是如何用 CSS 做到这一点。我我使用只允许我更改 CSS 的 CMS，这就是为什么我在谷歌搜索答案时到达 this 页面，而不是另一个页面。这就是为什么我们回答被问到的问题，而不是问为什么提问者的情况没有什么不同。

标签： css text replace


【解决方案1】：

或者您可以将“Facts”包裹在 <span> 周围，如下所示：

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}
<div class="pvw-title"><span>Facts</span></div>

【讨论】：

  • 很好，但这是对 HTML 而不仅仅是 CSS 的更改。
  • 有时它是您唯一的选择
  • span { 显示：无； } 还应该隐藏伪元素。您应该改用可见性：隐藏
  • 显示：无；和可见性：隐藏；都隐藏了伪元素
  • @Mathew 隐藏了跨度，但将伪元素添加到了 div，因此不应隐藏伪元素（通过使用可见性或显示属性）
【解决方案2】：

强制性：这是一个 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;
}

注意：

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

【讨论】：

  • 这在 ie 10 中不起作用，知道如何修改它吗？
  • display: none; 不起作用，因为 ::after 真正的意思是“在这个元素内部，但在最后”，以防有人好奇。
  • 不幸的是，“修改”按钮不再像按钮一样工作了。这是一个很好的例子，只是它不适用于按钮。
  • 显示：无；和可见性：隐藏；都隐藏了伪元素
  • 确实，这种 hack 并不是通用的。您必须考虑到生成的元素将保留原始元素的尺寸。所以你的替换文本应该是相同的宽度/高度。
【解决方案3】：

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

.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

【讨论】：

  • 此答案适用于许多其他答案不适用的地方，例如 &lt;th&gt; 元素内的文本节点。
  • 这很好用。在我的情况下，line-height: 0 和 color: transparent 在主要元素上并在伪上重置这些值来完成这项工作（不要摆弄text-indent）
  • 不应该是line-height: normal而不是initial吗？
  • 使用 text-indent 的原因是如果原始文本较长，则元素保持旧文本的大小，而不是缩小到新文本的大小（假设这是你想要的)
  • 文本缩进：-9999px；在 IE 上工作。而可见性：隐藏；方法在 IE 上不起作用。
【解决方案4】：

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

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}
&lt;button&gt;original&lt;/button&gt;

§ Absolute positioning

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

【讨论】：

  • 对我来说，这个答案优于其他答案，因为它可以在同一行内进行文本替换，也就是说，它不会强制在文本中换行（对于我的 HTML 和 CSS 的特定组合） .
【解决方案5】：

这是简单、简短且有效的。不需要额外的 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;
}

【讨论】：

    【解决方案6】：

    你不能，好吧，你可以。 

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

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

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

    【讨论】：

    • 我很确定我使用代码用那种方法替换文本。'
      事实
      Facts
      ' 我不能使用:after，因为我有多个同名的 div 类:(
    • 浏览器的兼容性有多广？而且我怀疑从长远来看，对于这种灵活性，javascript 将是一个更好的选择。
    • 现代浏览器支持它。我不确定旧的 IE 版本，但我想可以在 quirksmode.com 上查找。 -edit- 可以：quirksmode.org/css/user-interface/content.html
    【解决方案7】：

    尝试使用: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大屏幕

      大屏幕

    【讨论】：

      【解决方案8】：

      我最好将外部元素的font-size: 0 和:after 选择器的font-size 设置为我需要的任何东西。

      【讨论】：

      • 这很好用。 Here is a demo.
      • 智能使用 font-size:0 - 对我来说是第一次。赞一个！
      【解决方案9】：

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

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

      jsfiddle demonstration and examples

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

      【讨论】：

        【解决方案10】：

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

        【讨论】：

        【解决方案11】：

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

        【讨论】：

          【解决方案12】：

          我发现最简单的方法是制作元素font-size: 0px，然后在创建:after 伪时用任何字体大小覆盖它。示例如下：

          .pvw-title { 
    font-size:0px;
}

.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

          【讨论】：

            【解决方案13】：

            我使用这个技巧：

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

            【讨论】：

            • 这对于使用屏幕阅读器的用户来说是个问题。如果您不更改元素的显示/可见性并且不提供任何 aria 提示，则屏幕阅读器可能仍会读取您的“不可见”文本。
            【解决方案14】：

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

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

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

            【讨论】：

              【解决方案15】：

              试试这个方法：

              IDENTIFIER {
    visibility: hidden;
    position: relative;
}
IDENTIFIER::after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "NEW_CONTENT";
}

              【讨论】：

                【解决方案16】：

                使用伪元素，这种方法不需要知道原始元素，也不需要任何额外的标记。

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

                【讨论】：

                  【解决方案17】：

                  这将复选框实现为一个按钮，根据其“选中”状态显示是或否。因此，它演示了一种使用 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，所以它应该可以在其他地方工作。

                  【讨论】：

                    【解决方案18】：

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

                    基本上，我将我想要的文本放入一个 span 中，并将锚标记放在其下方，并将两者都包裹在一个 div 中。我基本上通过 CSS 将锚标记向上移动，然后使字体透明。现在，当您将鼠标悬停在跨度上时，它就像链接一样“起作用”。这样做的一种非常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 将需要根据您的要求进行更改，但这是执行您所要求的一般方法。

                    【讨论】：

                    • @AlmightWhy 我怀疑这被否决了，因为此解决方案需要修改标记，我怀疑如果 OP 可以修改标记，他/她只会直接更改文本。换句话说，OP 需要一个纯 CSS 的解决方案
                    【解决方案19】：

                    我找到了一个这样的解决方案，在较小的屏幕宽度上，单词“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;
}
                    &lt;span&gt;Dark&lt;/span&gt;

                    【讨论】：

                      【解决方案20】：

                      八年后，我在尝试使用 Stylish 浏览器扩展来更改网站上的某些内容（不是我的）时遇到了同样的挑战。而这一次我通过使用“inspect element”查看源代码并在此基础上创建 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 编辑器，这就是我想根据样式选择它的原因。子>

                      我在这里找到了答案：

                      【讨论】：

                        【解决方案21】：

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

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

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

                        【讨论】：

                        【解决方案22】：

                        好吧，正如许多人所说，这是一个黑客行为。但是，我想添加更多最新的 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，您可以轻松地将其扩展到移动设备。

                        【讨论】：

                          【解决方案23】：

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

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

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

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

                          【讨论】：

                          • 我也不能使用 Javascript :/
                          • 这是我认为唯一可行的方法： .pvw-title span[style*="color:#000, font-size:14px;"]{ visibility:hidden; } .pvw-title span[style*="color:#000; font-size:14px;"]: after{ visibility:visible;颜色：#000;字体大小：14px；内容：“测试”； } 但是，因为他们都使用相同的风格，我不能这样做.. :/
                          • 为什么要根据颜色/字体选择它？
                          • 我会根据整个样式来选择它，所以我可以编辑那个特定的标题，而不是两者，因为两者都有相同的“div”名称。
                          【解决方案24】：

                          实现这项工作的方法是在 CSS 内容中添加 line-height。这将使块在隐藏的上方可见，因此不会隐藏更改的文本。

                          之前使用示例：

                          .pvw-title span {
  display: none;
}

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

                          【讨论】：

                            【解决方案25】：

                            示例

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

                            【讨论】：

                              猜你喜欢
                              • 1970-01-01
                              • 1970-01-01
                              • 1970-01-01
                              • 2012-04-30
                              • 2023-03-12
                              相关资源
                              最近更新 更多
                              热门标签
                              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode