使用CSS隐藏仅包含空格的元素

Question

我试图在自动生成的HTML文档中隐藏以下元素:

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

    </p>

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

我试图隐藏它使用

.sitspagedesc:empty
{
display:none;
}

但是这不起作用,大概是因为元素包含的空格.

有没有人有什么好主意？

谢谢 :)

Answer 1

我不认为你可以用纯CSS做到这一点.

但是使用一点JavaScript就可以做到.

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';
  }
}

如果您可以访问jQuery,那么使用内置选择器进行过滤会更容易一些.

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

Answer 2

如果希望模仿:empty选择器的功能,除了忽略空格,则接受的答案(通过scunliffe)不能正常工作.它只检查子元素,这不会直接考虑所选元素中的文本.例如,<p>Hello World!</p>将被视为空,因为它没有子元素,即使它确实包含非空白文本.

我的解决方案使用jQuery.trim()函数从.text()值中删除前导和尾随空格,该值包含所选元素及其后代的组合文本内容.因此,如果所选元素不包含非空白文本且没有子元素,则隐藏所选元素.与:empty选择器一样,HTML注释不计入内容,因为它们不会反映在.text()或.children()值中.

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

请访问https://jsfiddle.net/TNTitan89/crejkbxq/查看小提琴.

Answer 3

答：尚未，但已起草。

https://drafts.c​​sswg.org/selectors-4/#the-blank-pseudo

...而且-至少对于Mozilla-已经有一个前缀实现... :-moz-only-whitespace：

http://jsfiddle.net/peayLrv3/