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

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

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

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

< div级= >事实“pvw-title < / div >

我得把"事实"替换掉。


当前回答

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

其他回答

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

为了在使用后隐藏原始内容,你可以使用这个hack:

.pvw-title { 字体大小:0; } .pvw-title:{后 字体大小:1快速眼动; 内容:“我是一段完全不同的文字!”; } < div class = " pvw-title”>事实< / div >

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

强制性:这是一个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'元素默认为内联元素 我们需要通过调整伪元素的位置来补偿原始元素。 我们必须隐藏原始元素,并使用可见性显示伪元素。注意显示:原始元素上的none无效。

实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方,因此这将不会隐藏更改的文本。

之前使用的例子:

.pvw-title span {
  display: none;
}

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

例子

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