我如何用CSS替换文本?

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

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

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

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

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

我需要替换“事实”。

1180162 次浏览
小开

你不能，嗯，你可以。

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

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

虽然你或多或少可以，但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记，比如文本周围的引号应该被引用。

小开

如果没有技巧，这是不可能的。这里有一种通过用文本的图像替换文本的方法。

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

这类事情通常是用JavaScript完成的。下面是如何用jQuery完成的:

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

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

小开

义务:这是一个hack: CSS不是这样做的正确地方，但在某些情况下-例如，你在iframe中有一个只能由CSS定制的第三方库-这种hack是唯一的选择。

您可以通过CSS替换文本。让我们把有hello字样的绿色按钮替换成有goodbye字样的红色按钮，使用CSS。

之前:

enter image description here

后:

enter image description here

现场演示请参见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不起作用。
小开
< p >基于 mikemaccana的回答, 这对我有用

button {
position: absolute;
visibility: hidden;
}


button:before {
content: "goodbye";
visibility: visible;
}
<button>original</button>

§ Absolute positioning

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

小开

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

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

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

小开

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

基本上，我把我想要的文本放到一个span中，把锚标签放在它下面，并在div中包装。我基本上通过CSS向上移动锚标签，然后使字体透明。现在，当您将鼠标悬停在跨度上时，它就像一个链接一样“起作用”。这是一种非常粗糙的方法，但这就是你如何使用不同文本的链接…

这是我如何解决这个问题的小提琴

我的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将需要根据您的需求进行更改，但这是完成您要求的一般方法。

小开

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

我必须这样做替换链接文本，除了home，为WooCommerce面包屑

萨斯 / 少

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;
}
小开

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

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

我用了这个技巧:

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

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

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

显示它们

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

jsfiddle演示和示例

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

小开

尝试使用: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 < p >

    大screenxxx

    大屏幕< / p >

  2. 与:after < p >

    xxxbig屏幕

    大屏幕< / p >

小开

我比较幸运地将外部元素的font-size: 0和:after选择器的font-size设置为我需要的任何东西。

小开

与我在其他答案中看到的不同，你不需要使用伪元素以用图像替换标记的内容

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


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

文本替换伪元素和CSS可见性

超文本标记语言

<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.";
}
小开

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

使用之前的例子:

.pvw-title span {
display: none;
}


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

我找到了一个这样的解决方案，在较小的屏幕宽度上，一个单词“Dark”将被缩短为“D”。基本上，您只需使原始内容的字体大小为0，并将缩短的形式作为伪元素。

在这个例子中，改变发生在hover上:

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;
}
<span>Dark</span>

小开

八年后，当我试图使用时尚的浏览器扩展来改变一个网站(不是我的)上的一些东西时，我面临着同样的挑战。这一次，我通过使用“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编辑器，这就是为什么我想根据风格选择它。

我在这里找到了答案:

小开

很多人都说这是黑客。然而，我想添加更多最新的黑客，它利用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，你可以很容易地将其扩展到移动设备。

一个黑客如何替换HTML文本使用CSS

小开

例子

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

我发现的最简单的方法是将元素设为font-size: 0px，然后在创建:after pseudo时用任意字体覆盖它。在下面的例子:

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


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

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

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

Setting font-size to 0 makes the text disappear without removing the actual element from the viewport. Therefore, the :after selector works and should show on all browsers.

小开

试试这个方法:

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

提交答案