Скрыть B в <x>A <br/> B </x>

Question

У меня есть:

<h2>foo<br/>bar</h2>

и я хотел бы скрыть "бар", но не могу найти правильный селектор.

Это вообще возможно?

Answer 1

Я думаю, вы должны обернуть B в <span>B</span> и скрыть этот промежуток.

Answer 2

Во-первых: правильный способ - добавить еще один тег, если можете, как предлагали другие.
Однако это можно сделать с помощью селектора contents() в jQuery, в два этапа (я гуглил, как найти текстовые узлы с помощью jQuery). Во-первых, на $(document).ready найдите все свободные текстовые узлы и окружите их фиктивными <span> s (или чем угодно). Учитывая, это будет немного спамить ваш DOM:

$(document).ready(function(){
 $("h2").contents()
    .filter(function(){ return this.nodeType != 1; })
    .wrap("<span/>");
});

Теперь у вас нет пустых текстовых узлов, поэтому вы можете легко выбрать вторую строку:

$("h2 br").nextAll();

Answer 3

Все решения css:

h2 {
    font-size:0%;
}
h2:first-line {
    font-size:19pt;
}

Answer 4

Попробуйте h2: не (: первая строка)

Сомнительно, что это работает, хотя первая строка довольно глючная во всех браузерах. (см. http://docs.jquery.com/Selectors/not#selector и http://www.w3schools.com/Css/pr_pseudo_first-line.asp)

Answer 5

Насколько мне известно, селектора для него нет. Возможное (хакерское) решение - установить высоту для элемента H2 и добавить переполнение: hidden;

Answer 6

Невозможно выделить текстовый узел с помощью селектора. Тем не менее, вы все равно можете делать то, что вы хотите:

var brFound = false;
$('h2').contents().each(function() {
  if (brFound) {
    this.parentNode.removeChild(this);
    // Alternatively, you could use either of these, but it won’t be as fast:
    // $(this).remove();
    // $(this).wrap('<span style="display:none;" />');
  }
  if (this.tagName && this.tagName.toLowerCase() == 'br') {
    brFound = true;
  }
});

Это удалит все текстовые узлы и другие элементы, которые появляются после <br> внутри <h2> элемента, оставляя <br> без изменений.