html - none - ocultar elemento css

Ocultar un elemento que contiene solo espacios usando CSS

Question

Estoy tratando de ocultar el siguiente elemento en un documento HTML generado automáticamente:

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

    </p>

En algunas páginas, la etiqueta <p> contendrá un valor interno, pero en otras solo puede contener espacios como se muestra en el ejemplo. Necesito encontrar una forma de ocultar esto para que se oculte solo con CSS, ya que cambiar el HTML no es una opción.

He tratado de ocultarlo usando

.sitspagedesc:empty
{
display:none;
}

pero esto no funciona, probablemente en la cuenta de los espacios que contiene el elemento.

¿Alguien tiene alguna idea buena?

Gracias :)

Answer 1

Aquí está mi solución que acabo de implementar para un cliente utilizando jQuery 1.5.x: es posible que tenga que ajustar las //skip empty tags but which are valid cadena de expresión regular //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 2

Aunque no es un estándar, Firefox tiene " :-moz-only-whitespace ".

Además, para algunas "pruebas futuras", css-tricks menciona un selector en :blank que formará parte del borrador del Nivel 4 de los selectores de CSS. Si bien ningún navegador actual lo admite, es una posibilidad.

Answer 3

El :empty selector :empty es de hecho muy estricto. Un elemento que contiene un espacio no se considera vacío. Así que hay dos soluciones.

1. Modificar la salida. Recorte los valores que imprime o minimice el HTML, por lo que esos espacios se eliminan. O incluso mejor: no renderices esos elementos en absoluto. Creo que es la mejor opción, ya que minimiza el tráfico y le brinda una solución que funciona sin Javascript.
2. Usa Javascript para encontrar esos elementos. No tengo conocimiento de los trucos que te permiten encontrar estos elementos fácilmente, por lo que es posible que tengas que recorrer todos los elementos, buscar los que consideres vacíos y agregar una clase a esos elementos. Esto puede ser muy lento, especialmente en dispositivos de gama baja. Además, solo ocultará los elementos una vez que se ejecute el script, por lo que en la carga de la página, el elemento estará visible por un tiempo corto hasta que esté oculto. Puede estar claro que esta no es la solución ideal.

Tal vez puedas combinar ambos. El selector :empty es un selector CSS3 y aún no es compatible con IE8 y anteriormente, por lo que un navegador de JavaScript podría ser una buena idea para esos navegadores, a menos que pueda corregir las secuencias de comandos del lado del servidor para que no se representen los elementos vacíos o reciben su clase especial durante el procesamiento, por lo que no se necesita Javascript.

Answer 4

No creo que puedas hacerlo con CSS puro.

Sin embargo con un poco de JavaScript puedes hacerlo.

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

Si tiene acceso a jQuery, es un poco más fácil hacer el filtrado con sus selectores integrados.

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

Answer 5

No hay forma de detectar elementos vacíos en CSS puro (hasta ahora). Si Javascript no es una opción, ¿hay algo que pueda hacer en el lado del servidor para manipular el HTML antes de que llegue al navegador?

Answer 6

Podrías usar:

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

A menos que tengas varios espacios al azar allí ...

Answer 7

Respuesta: Todavía no, pero está redactado.

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

... y, al menos para Mozilla, ya existe una implementación prefijada ... :-moz-only-whitespace :

http://jsfiddle.net/peayLrv3/

Answer 8

Si el deseo es imitar la funcionalidad del selector :empty , excepto que se ignora el espacio en blanco, la respuesta aceptada (por scunliffe ) no funciona del todo. Solo comprueba los elementos secundarios, y esto no tiene en cuenta el texto directamente dentro del elemento seleccionado. Por ejemplo, <p>Hello World!</p> trataría como vacío porque no tiene elementos secundarios aunque no contenga texto que no sea espacios en blanco.

Mi solución utiliza la función jQuery.trim() para eliminar los espacios en blanco .text() y finales del valor .text() que contiene el contenido de texto combinado del elemento seleccionado y sus descendientes. Por lo tanto, el elemento seleccionado se oculta si no contiene texto que no sea un espacio en blanco ni elementos secundarios. Al igual que con el selector vacío, los comentarios HTML no se cuentan como contenido, ya que no se reflejan en los valores .text () o .children ().

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

Consulte el Fiddle en https://jsfiddle.net/TNTitan89/crejkbxq/ .

Answer 9

css:

.sitspagedesc:empty
{
display:none;
}

jquery

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