Question

是否可以使用CSS处理元素中的特定文本？例如。：

<div class="myClass">Good content --bad content--</div>

我想在--和两个分隔符（--[...]--）之间隐藏文字。所以它毕竟应该是这样的：

<div class="myClass">Good content </div>

我不能将不良内容放在某些HTML标签中（技术限制）！

Answer 1

如果您的问题是仅为未启用js的人隐藏特定文本，并且您可以访问源代码并且可以修改js / html / css 然后你可以尝试在属性中保存不安全的文本，并默认使用伪选择器分配它，并在脚本中加载主体时指定一个将重写伪选择器内容的类：

.myClass::after {
  content: attr(data-no-js);
}

.js-enabled .myClass::after {
  content: "";
}

<script>document.body.classList.add('js-enabled');</script>
<div class="myClass" data-no-js=" --bad content--">Good content</div>

Answer 2

是否可以使用CSS解决元素中的特定文本？

不，不是。

Answer 3

您必须使用 Javascript ，您可以使用String replace()方法：

data1

如果你真的不想使用JavaScript，这里是一个CSS解决方案，但是你必须让它适应你的var str = 'Good content --bad content-- sometext'; str = str.replace(/--[^]*--/g, ""); alert(str); /* Good content sometext */，我认为这不是最好的方法。

font-size

.myClass{width:100px; height: 20px; overflow:hidden;}

Answer 4

您无法根据specs的内容进行真正的选择。

但是，这里有一些东西 - 实验性的 - 只是为了好玩，因为你只说了我认为不可能的CSS。

目前还没有跨浏览器支持......我的意思是它无法在IE或Edge上运行。我在Chrome 58和FF 54中进行了测试，一切都很好。

话虽如此，Can I use表示这对至少89％的用户有效。

.myClass {
  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1)14%, /** <---- Use this percentage to determine the cutoff point **/
  rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0));
}

<div class="myClass">Good content --bad content--</div>

使用CSS定位特定内容

4 个答案: