使用CSS隐藏仅包含空格的元素 [英] Hiding an element that contains only spaces using CSS

问题描述

 < p id =sitspagedesc
 
我试图在自动生成的HTML文档中隐藏以下元素：类= sitspagedesc > 
 
< / p> 
  

在一些页面中，< p> 标签将包含一个内部值，但在其他标签中它可以只包含空格，如示例中所示。我需要找到一种方法来隐藏它，以便它仅使用CSS隐藏，因为更改HTML不是一种选择。

我曾尝试使用

  .sitspagedesc：空
 {
 display：none; 
} 
  

但这不起作用，可能是因为元素包含的空格。

有人有什么好主意吗？

感谢：）

解决方案

我不认为你可以用纯CSS做。

然而，只需一点JavaScript就可以做到。

  var allParas = document.getElementsByTagName（'p'）; 
 //如果需要，按类名过滤... 
 for（var i = 0; i< allParas.length; i ++）{
 if（allParas [i] .getElementsByTagName（'* '）.length == 0）{
 allParas [i] .style.display ='none'; 
 
 
 
 
 $ b如果你有权访问jQuery， （$ {$ p $ $ $ $ $ $ $'$'$'$'$'$''）。每一个（函数（）{
 if（$（this）.children（）。length == 0）{
 $（this）.hide（）; 
} 
}）; 
  

I am trying to hide the following element in an automatically generated HTML document:

  <p id="sitspagedesc" class="sitspagedesc">

    </p>

In some pages, the <p> tag will contain an inner value but in others it can contain only spaces as shown in the example. I need to find a way of hiding this so that it is hidden using CSS only, as changing the HTML is not an option.

I have tried to hide it using

.sitspagedesc:empty
{
display:none;
}

but this does not work, presumably on the account of the spaces the element contains.

Does anyone have any good ideas?

Thanks :)

解决方案

I don't think you can do it with pure CSS.

However with a little JavaScript you can do it.

var allParas = document.getElementsByTagName('p');
//filter by class name if desired...
for(var i=0;i<allParas.length;i++){
  if(allParas[i].getElementsByTagName('*').length == 0){
    allParas[i].style.display = 'none';
  }
}

If you have access to jQuery it is a little easier to do the filtering with their built in selectors.

$('p.sitspagedesc').each(function(){
  if($(this).children().length == 0){
    $(this).hide();
  }
});

这篇关于使用CSS隐藏仅包含空格的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！