我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
当前回答
我找到了一个这样的解决方案,在较小的屏幕宽度上,一个单词“Dark”将被缩短为“D”。基本上,您只需使原始内容的字体大小为0,并将缩短的形式作为伪元素。
在这个例子中,改变发生在hover上:
跨度{ 字体大小:12 px; } 跨度:{后 显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; } 跨度:{徘徊 字体大小:0 px; } 跨度:徘徊:{后 显示:内联; } 黑暗< span > < / span >
其他回答
使用伪元素,该方法不需要原始元素的知识,也不需要任何额外的标记。
#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;
}
如果您愿意使用伪元素并让它们插入内容,您可以执行以下操作。它不假设原始元素的知识,也不需要额外的标记。
.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例子
实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方,因此这将不会隐藏更改的文本。
之前使用的例子:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}
强制性:这是一个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无效。
或者你可以把'Facts'包在<span>上,如下所示:
.pvw-title span { 显示:没有; } .pvw-title:{后 内容:“你想加什么就加什么”; } < div class = " pvw-title " > < span >事实< / span > < / div >