如何通过 CSS 隐藏文本中的单词

Question

我正在通过 WordPress 创建一个网站，出于某种原因，我可以编辑 CSS 但不能编辑 HTML 代码，我想隐藏一些文本但不是全部.代码是：

我要隐藏"CATEGORY:"

<div class="page-heading">
  <div class="page-title">
     <h2>Category: Vegetables</h2>
  </div>
</div>

Answer 1

由于您不能将 span 标记添加到 HTML 代码，因此不能将 "Category: " 与文本的其余部分分开以使用 [=31= 来解决它], 你可以使用 Javascript/jQuery:

您可以使用以下脚本。它通过什么都不替换从文本中删除 "Category: " 并将应用于 any h2 在 .page-title 元素内 [=] 15=]元素.

var myheader = $('.page-heading .page-title h2').text();
var changedtext = myheader.replace("Category: ", "");
$('.page-heading .page-title h2').text(changedtext);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-heading">
  <div class="page-title">
    <h2>Category: Vegetables</h2>
  </div>
</div>

Answer 2

使用了这个 cdn https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://codepen.io/stanley3569/pen/qBdwpQq

<h2>Category: Vegetables</h2>

css

.hiddenText {
  opacity: 0;  
}

js

$("h2").html(function(){
  var text= $(this).text().trim().split(" ");
  var first = text.shift();
  return (text.length > 0 ? "<span class='hiddenText'>"+ first + "</span> " : first) + text.join(" ");
});

Answer 3

<style>
#cat_hide     {
display: none;
 }
 </style>
</head>
<body>
<!-- Note : You want hide any content  you must lock that 
content with any possible tag.  -->
 <div class="page-title">
<h2><span Id="cat_hide">Category:</span> 
  Vegetables</h2>
</div>
</body>

如何通过 CSS 隐藏文本中的单词

How to hide a word from text through CSS

css

wordpress

custom-wordpress-pages