如何通过 CSS 隐藏文本中的单词
How to hide a word from text through CSS
我正在通过 WordPress 创建一个网站,出于某种原因,我可以编辑 CSS 但不能编辑 HTML 代码,我想隐藏一些文本但不是全部.代码是:
我要隐藏"CATEGORY:"
<div class="page-heading">
<div class="page-title">
<h2>Category: Vegetables</h2>
</div>
</div>
由于您不能将 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>
使用了这个 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(" ");
});
<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>
我正在通过 WordPress 创建一个网站,出于某种原因,我可以编辑 CSS 但不能编辑 HTML 代码,我想隐藏一些文本但不是全部.代码是:
我要隐藏"CATEGORY:"
<div class="page-heading">
<div class="page-title">
<h2>Category: Vegetables</h2>
</div>
</div>
由于您不能将 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>
使用了这个 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(" ");
});
<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>