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

Я пытаюсь скрыть следующий элемент в автоматически создаваемом HTML-документе:

В некоторых страницах

будет содержать внутреннее значение, но в других он может содержать только пробелы, как показано в примере. Мне нужно найти способ скрывать это, чтобы он был скрыт только с помощью CSS, так как изменение HTML не является вариантом.

Я попытался скрыть это, используя

 .sitspagedesc:empty { display:none; } 

но это не работает, по-видимому, из-за пространств, которые содержит элемент.

У кого-нибудь есть хорошие идеи?

Благодаря 🙂

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

Я не думаю, что вы можете сделать это с помощью чистого CSS.

Однако с помощью небольшого JavaScript вы можете это сделать.

 var allParas = document.getElementsByTagName('p'); //filter by class name if desired... for(var i=0;i 

Если у вас есть доступ к jQuery, немного легче сделать фильтрацию с помощью встроенных селекторов.

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

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

Hello World!

будет считаться пустым, поскольку он не имеет дочерних элементов, даже если он содержит текст без пробелов.

Мое решение использует функцию 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/ .

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

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

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

http://jsfiddle.net/peayLrv3/

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

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

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

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

Вот мое решение, которое я только что применил для клиента с помощью 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() } ); 

Хотя это не стандарт, Firefox имеет « : -moz-only-whitespace ».

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

CSS:

 .sitspagedesc:empty { display:none; } 

JQuery:

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

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

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

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