Hide B in <x>A<br/>B</x>

Question

I have a:

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

and I'd like to hide "bar", but I can't figure out a proper selector.

Is it even possible?

Answer 1

There isn't a selector for it as far as I know. A possible (hacky) solution would be to set a height for the H2 element and add overflow: hidden;

Answer 2

Try h2:not(:first-line)

It's doubtful that this works though, first-line is rather buggy across browsers. (see http://docs.jquery.com/Selectors/not#selector and http://www.w3schools.com/Css/pr_pseudo_first-line.asp )

Answer 3

I think you should wrap B in <span>B</span> and hide that span.

Answer 4

First: the correct way is to add another tag, if you can, as the others suggested.
However, this can be done using jQuery's contents() selector, in two stages (I've googled on how to find text nodes with jQuery). First, on $(document).ready, find all free text nodes and surround them with dummy <span>s (or whatever you want). Given, this will spam your DOM a little:

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

Now you don't have any naked text nodes, so you can easily select the second line:

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

Answer 5

An all css solution:

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