Как скрыть слово из текста через CSS - PullRequest
Новая
       16

Как скрыть слово из текста через CSS

0 голосов
/ 02 апреля 2020

Я работаю над сайтом через WordPress и по какой-то причине я могу редактировать код CSS, но не код HTML, и я хочу скрыть некоторый текст, но не весь. Код:

Я хочу скрыть "КАТЕГОРИЯ:" 

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

Ответы [ 3 ]

0 голосов
/ 02 апреля 2020

ИСПОЛЬЗУЕТСЯ этот 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(" ");
});
0 голосов
/ 02 апреля 2020 
<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>
0 голосов
/ 02 апреля 2020

Поскольку вы не можете добавить тег span к коду HTML и, следовательно, не можете отделить «Category:» от остальной части текста для адресации с помощью CSS, вы можете использовать Javascript / jQuery:

Вы можете использовать следующий скрипт. Он удаляет «Category:» из текста, заменяя его ничем, и применяется к любому h2 в элементе .page-title, который находится внутри элемента .page-heading. 

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