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

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

:empty

选择器确实非常严格。包含空格的元素不被视为空。所以有两种解决方案

1. 修改输出。修剪您输出的值或最小化 HTML，以便删除这些空格。或者甚至更好：根本不渲染这些元素。我认为这是最好的选择，因为它既可以最大限度地减少流量，又可以为您提供一个无需 Javascript 即可工作的解决方案。
2. 使用 Javascript 来查找这些元素。我不知道可以让您轻松找到这些元素的技巧，因此您可能必须遍历所有元素，搜索您认为空的元素并向这些元素添加一个类。这可能会非常慢，尤其是在低端设备上。此外，它只会在脚本运行后隐藏元素，因此在页面加载时，元素将在短时间内可见，直到被隐藏。很明显，这不是理想的解决方案。

也许你可以将两者结合起来。

:empty

选择器是 CSS3 选择器，IE8 及之前版本尚不支持，因此对于这些浏览器来说，Javascript 回退可能是一个好主意，除非您可以修复服务器端脚本以便根本不渲染空元素，或者在渲染过程中被赋予特殊的类，因此不需要 Javascript。

Answer 4

答案：还没有，但已经起草了。

https://drafts.csswg.org/selectors-4/#the-blank-pseudo

...而且——至少对于 Mozilla 来说——已经有一个前缀实现了...

:-moz-only-whitespace

:

http://jsfiddle.net/peayLrv3/

Answer 5

（到目前为止）还没有办法检测纯 CSS 中的空元素。如果 Javascript 不是一个选项，您可以在服务器端执行什么操作来在 HTML 到达浏览器之前对其进行操作吗？

Answer 6

这是我刚刚使用 jQuery 1.5.x 为客户端实现的解决方案 - 您可能需要调整

//skip empty tags but which are valid

正则表达式字符串。

$('*:only-child:empty').each(
    function(index) {
        var currentElement = $(this);
        // skip singleton tags
        if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        // skip empty tags but which are valid
        if(/^(?:textarea)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        while (currentElement.parent().children().length == 1) {
            currentElement = currentElement.parent();
        }
        // so 0 or more children for the parent then we hide it
        // we will never have more then 0 children though the :empty takes care of that
        console.log('hidding: ' + currentElement);
        currentElement.hide()
    }
);

Answer 7

虽然不是标准，但 Firefox 有“:-moz-only-whitespace”。

此外，对于一些“未来的证明”，css-tricks提到了一个

:blank

选择器，它将成为CSS选择器4级草案的一部分。虽然当前没有浏览器支持它，但这是有可能的。

Answer 8

通过 JavaScript：

element.hidden = !element.textContent.trim()

Answer 9

CSS：

.sitspagedesc:empty
{
display:none;
}

jquery：

$('.sitspagedesc').html(function(){
// empty element
return $.trim($(this).html());
});

Answer 10

您可以使用：

p.sitspagedesc {
  content: " "; 
  display: none;
}

除非你随机有多个空格...