如何用CSS替换文本？-Java 学习之路

228

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

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

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

我必须使用 [ ] 来使它工作 .

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

我需要更换“事实” .

17 回答

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

回复于 2024-05-03T10:01:03+08:00

或者你可以将'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';
}

回复于 2024-05-03T10:01:03+08:00

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

您可以通过CSS替换文本 . Let's replace a green button with 'hello' with a red button that says 'goodbye' ，使用CSS . 有关现场演示，请参阅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'元素默认为span
- 我们需要通过调整伪元素的位置来补偿原始元素 .
- 我们必须隐藏原始元素并使用 visibility 显示伪元素 . 注意原始元素上的 display: none 不起作用 .
回复于 2024-05-03T10:01:03+08:00

176

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

.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

回复于 2024-05-03T10:01:03+08:00

12
基于mikemaccana’s answer，这对我有用
```
button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}
```
§ Absolute positioning

绝对定位的元素从流中取出，因此在放置其他元素时不占用空间 .
回复于 2024-05-03T10:01:03+08:00

简单，简短，有效 . 不需要额外的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;
}

回复于 2024-05-03T10:01:03+08:00

8
你不能，嗯，你可以 .
```
.pvw-title:after {
  content: "Test";
}
```
这将在元素的当前内容之后插入内容 . 它实际上并不替换它，但您可以选择空div，并使用CSS添加所有内容 .

但是，当你或多或少可以，你不应该 . 实际内容应放在文件中 . content属性主要用于小标记，例如应该出现引用的文本周围的引号 .
回复于 2024-05-03T10:01:03+08:00
1
尝试使用：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）用：之前

大屏幕xxx

大屏幕

2）用：之后

xxxbig屏幕

大屏幕
回复于 2024-05-03T10:01:03+08:00

这对我来说有内联文字 . 在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; 
}

回复于 2024-05-03T10:01:03+08:00

9

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

因此，如果您只想显示不同的文本或图像， keep the tag empty and write your content in multiple data attributes 就像 <span data-text1="Hello" data-text2="Bye"></span> . 使用其中一个伪类 :before {content: attr(data-text1)} 显示它们

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

jsfiddle demonstration and examples

回复于 2024-05-03T10:01:03+08:00

我用这个技巧：

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

回复于 2024-05-03T10:01:03+08:00

2

我有更好的运气设置外部元素的 font-size: 0 ，以及 :after 选择器的 font-size 到我需要的任何东西 .

回复于 2024-05-03T10:01:03+08:00

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

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

回复于 2024-05-03T10:01:03+08:00

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

回复于 2024-05-03T10:01:03+08:00

6
没有技巧，这是不可能的 . 这是一种通过用文本图像替换文本的方法 .
```
.pvw-title{
    text-indent:-9999px;
    background-image:url(text_image.png)
}
```
这种类型的东西通常使用Javascript完成 . 以下是如何使用jQuery完成的：
```
$('.pvw-title').text('new text');
```
回复于 2024-05-03T10:01:03+08:00
1
我有一个问题，我不得不替换链接的文本但不能使用javascript也不能直接更改超链接的文本，因为它是从XML编译而来的 . 此外，我不能使用伪元素，或者当我尝试它们时它们似乎不起作用 .

基本上，我把我想要的文本放入一个 Span 中，并将锚标记放在它下面并将它们包装在一个div中 . 我基本上通过css移动锚标签然后使字体透明 . 现在当你盘旋在 Span 上，它“行为”就像一个链接 . 这是一个真正的hacky方式，但这就是你可以用不同文本链接的方式......

This is a fiddle of how I got around this issue

我的HTML
```
<div class="field">
    <span>This is your link text</span>

    <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需要根据您的要求进行更改，但这是执行您所要求的一般方式 .

编辑：有人可以告诉我为什么这是downvoted？我的解决方案有效
回复于 2024-05-03T10:01:03+08:00
126
与我在其他每个答案中看到的不同，您不需要使用伪元素来替换图像的内容与图像
事实
```
div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}
```
回复于 2024-05-03T10:01:03+08:00

如何用CSS替换文本？

17 回答

相关问题