web-dev-qa-db-fra.com

Masquer un élément contenant uniquement des espaces à l'aide de CSS

J'essaie de masquer l'élément suivant dans un document HTML généré automatiquement:

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

    </p>

Dans certaines pages, la balise <p> contient une valeur interne, mais dans d'autres, elle ne peut contenir que des espaces, comme indiqué dans l'exemple. Je dois trouver un moyen de le cacher pour qu'il soit masqué à l'aide de CSS uniquement, car la modification du code HTML n'est pas une option. 

J'ai essayé de le cacher en utilisant

.sitspagedesc:empty
{
display:none;
}

mais cela ne fonctionne pas, probablement sur le compte des espaces que l'élément contient.

Est-ce que quelqu'un a de bonnes idées? 

Merci :)

htmlcsshidepseudo-class
23
Andy Kaufman

Je ne pense pas que vous puissiez le faire avec du CSS pur.

Cependant, avec un peu de JavaScript, vous pouvez le faire.

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 vous avez accès à jQuery, il est un peu plus facile de faire le filtrage avec leurs sélecteurs intégrés.

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

Si vous souhaitez imiter la fonctionnalité du sélecteur :empty sauf que les espaces blancs sont ignorés, la réponse acceptée (par scunliffe ) ne fonctionne pas tout à fait. Il vérifie uniquement les éléments enfants, ce qui ne prend pas en compte le texte directement dans l'élément sélectionné. Par exemple, <p>Hello World!</p> serait traité comme vide car il ne contient aucun élément enfant, même s'il contient du texte non blanc.

Ma solution utilise la fonction jQuery.trim () pour supprimer les espaces de début et de fin de la valeur .text () qui contient le contenu textuel combiné de l'élément sélectionné et de ses descendants. Ainsi, l'élément sélectionné est masqué s'il ne contient aucun texte non blanc ni élément enfant. Comme avec le sélecteur: empty, les commentaires HTML ne sont pas comptés comme contenu car ils ne sont reflétés ni dans les valeurs .text () ni .children ().

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

Voir le Fiddle sur https://jsfiddle.net/TNTitan89/crejkbxq/ .

5
Garland Pope

Réponse: Pas encore, mais c'est rédigé.

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

... et - au moins pour Mozilla - il existe déjà une implémentation préfixée ... :-moz-only-whitespace:

http://jsfiddle.net/peayLrv3/

4
Frank Nocke

Le sélecteur :empty est en effet très strict. Un élément contenant un espace n'est pas considéré comme vide. Donc, il y a deux solutions

  1. Modifier la sortie. Réduisez les valeurs que vous indiquez ou réduisez le code HTML afin que ces espaces soient supprimés. Ou mieux encore: ne rendez pas ces éléments du tout. Je pense que c'est la meilleure option, car elle minimise le trafic et vous offre une solution qui fonctionne sans Javascript.
  2. Utilisez Javascript pour trouver ces éléments. Je ne connais pas les astuces qui vous permettent de trouver facilement ces éléments. Vous devrez donc peut-être parcourir tous les éléments, rechercher ceux que vous considérez comme vides et y ajouter une classe. Cela peut être très lent, en particulier sur les appareils bas de gamme. En outre, il ne masquera les éléments qu'une fois le script exécuté. Par conséquent, lors du chargement de la page, l'élément sera visible pendant un court instant jusqu'à ce qu'il soit masqué. Il est clair que ce n'est pas la solution idéale.

Peut-être que vous pouvez combiner les deux. Le sélecteur :empty est un sélecteur CSS3 et n'est pas encore pris en charge par IE8 et les versions antérieures. Un repli Javascript pourrait donc être une bonne idée pour ces navigateurs, à moins que vous ne puissiez corriger les scripts côté serveur afin que les éléments vides ne soient pas rendus du tout sont donnés votre classe spéciale lors du rendu, donc pas de Javascript est nécessaire.

3
GolezTrol

Bien que n'étant pas un standard, Firefox contient " : -moz-only-whitespace ".

De plus, pour certaines "opérations futures", css-tricks mentionne un sélecteur :blank qui fera partie du brouillon de niveau 4 du sélecteur CSS. Bien qu'aucun navigateur actuel ne le supporte, c'est une possibilité.

0
Fewfre

Il n'y a aucun moyen de détecter des éléments vides en CSS pur (pour l'instant). Si Javascript n'est pas une option, pouvez-vous faire quelque chose côté serveur pour manipuler le code HTML avant qu'il n'atteigne le navigateur?

0
A.M. D.

Voici la solution que je viens d'implémenter pour un client utilisant jQuery 1.5.x - vous devrez peut-être ajuster la chaîne d'expression régulière //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()
    }
);
0
Daniel Sokolowski