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

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

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

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

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

我得把"事实"替换掉。


当前回答

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

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

Jsfiddle演示和示例

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

其他回答

我发现的最简单的方法是使元素font-size: 0px,然后在创建:后pseudo时用任何字体大小覆盖它。在下面的例子:

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

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

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

例子

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

基于 mikemaccana的回答, 这对我很有效

按钮{ 位置:绝对的; 可见性:隐藏; } 按钮:{之前 内容:“再见”; 可见性:可见; } 原来<按钮> < / >按钮

§绝对定位

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

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

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

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