Скрытие элемента, содержащего только пробелы с использованием CSS

Ответ 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();
  }
});

Ответ 2

Если желание состоит в том, чтобы имитировать функциональность селектора :empty, за исключением того, что пробелы игнорируются, принятый ответ (scunliffe) не совсем Работа. Он проверяет только дочерние элементы, и это не учитывает текст непосредственно внутри выбранного элемента. Например, <p>Hello World!</p> будет считаться пустым, поскольку он не имеет дочерних элементов, даже если он содержит текст без пробелов.

В моем решении используется функция jQuery.trim(), чтобы удалить ведущие и завершающие пробелы из . text(), которое содержит комбинированное текстовое содержимое выбранного элемента и его потомков. Таким образом, выбранный элемент скрыт, если в нем нет текста без пробелов и никаких дочерних элементов. Как и в случае с пустым селектором, комментарии HTML не учитываются как содержимое, поскольку они не отражаются в значениях .text() или .children().

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

Смотрите Fiddle на https://jsfiddle.net/TNTitan89/crejkbxq/.

Ответ 3

Ответ: Пока нет, но он составлен.

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

... и, по крайней мере, для Mozilla - уже существует префиксная реализация... :-moz-only-whitespace:

http://jsfiddle.net/peayLrv3/

Ответ 4

Селектор :empty действительно очень строгий. Элемент, содержащий пространство, не считается пустым. Итак, есть два решения

• Измените выход. Обрезайте значения, которые вы выводите, или минимизируете HTML, поэтому эти пробелы удаляются. Или еще лучше: вообще не делайте эти элементы. Я думаю, что это лучший вариант, поскольку он минимизирует трафик и дает вам решение, которое работает без Javascript.
• Используйте Javascript для поиска этих элементов. Я не знаю трюков, которые позволяют легко находить эти элементы, поэтому вам, возможно, придется пробежать все элементы, ищите те, которые считаете пустыми, и добавьте класс к этим элементам. Это может быть очень медленным, особенно на низкоуровневых устройствах. Кроме того, он будет скрывать элементы только после запуска script, поэтому при загрузке страницы элемент будет отображаться ненадолго, пока он не будет скрыт. Может быть ясно, что это не идеальное решение.

Возможно, вы можете комбинировать оба. Селектор :empty является селектором CSS3 и пока не поддерживается IE8 и ранее, поэтому резервная копия Javascript может быть хорошей идеей для этих браузеров, если вы не можете исправить скрипты на стороне сервера, чтобы пустые элементы вообще не отображались, или вам предоставляется специальный класс во время рендеринга, поэтому не требуется Javascript.

Ответ 5

Невозможно обнаружить пустые элементы в чистом CSS (пока). Если Javascript не является вариантом, есть ли что-нибудь, что вы можете сделать на стороне сервера, чтобы манипулировать HTML до того, как он достигнет браузера?

Ответ 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()
    }
);

Ответ 7

В то время как не стандарт, Firefox имеет :-moz-only-whitespace".

Кроме того, для некоторой "будущей проверки" css-tricks упоминает селектор :blank, который станет частью CSS Selectors Level 4 проект. Хотя текущий браузер не поддерживает его, это возможно.

Ответ 8

CSS

.sitspagedesc:empty
{
display:none;
}

JQuery

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

Ответ 9

Вы можете использовать:

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

Если у вас случайно есть несколько пробелов...