我如何用CSS替换文本?

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

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

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

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

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

我得把"事实"替换掉。

当前回答

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

按钮的文本:

之前: 大screenxxx 大屏幕后: xxxbig屏幕大屏幕

2016-09-12 17:14:45

其他回答

或者你可以把'Facts'包在<span>上，如下所示:

.pvw-title span { 显示:没有; ｝ .pvw-title:{后内容:“你想加什么就加什么”; ｝ < div class = " pvw-title " > < span >事实< / span > < / div >

2012-12-18 21:03:52

文本替换伪元素和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.";
}

2018-08-16 00:25:31

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

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

跨度{ 字体大小:12 px; ｝跨度:{后显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; ｝跨度:{徘徊字体大小:0 px; ｝跨度:徘徊:{后显示:内联; ｝黑暗< span > < / span >

2019-12-28 21:11:10

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

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

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

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

2011-10-25 22:06:48

八年后，当我试图使用Stylish浏览器扩展来更改一个网站(不是我的)上的某些内容时，我遇到了同样的挑战。这一次，我通过使用“inspect element”查看源代码，并基于此创建CSS代码，使其工作。

这是它以前的样子:

< table > < tbody > < tr > < td gridcell”角色= > <span标题=“在进展中”风格=“背景”右方:2px;text-align: center;width: 45px;显示:区块;超流:隐藏;文本overflow: ellipsis;“>进行中< /跨越> < / 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编辑器时，你唯一拥有的东西，这就是为什么我想根据风格选择它。

我在这里找到了答案:

高级CSS选择器-根据样式选择 CSS选择器的内联样式属性

2020-01-02 11:26:22

我如何用CSS替换文本?

推荐文章

最新文章

标签