使用CSS或jQuery隐藏段落中没有的内容？

Question

我希望隐藏在某个<p>内<div>内的任何内容 - 特别是在第一个<p>之前的任何内容。例如：

<div id="description">
TEXT I WANT REMOVED
<p>Keep this text</p>
<p>Keep this too</p>
</div>

Answer 1

有isn't something like a text-node-selector in css，所以我想到的唯一解决这个问题的方法是为外部元素设置font-size: 0;并为p设置一个正常值（尽管如此感觉有点......肮脏）。

see it in action on jsfiddle

Answer 2

一个选项是使用可见性 - 但问题是其他元素占用的空间可能无法正确折叠

#description {
    visibility: collapse;
}
#description p{
    visibility: visible;
}

演示：Fiddle

另一种解决方案是

$('#description').contents().filter(function(){
    return this.nodeType == 3 && $.trim(this.nodeValue) != '';
}).wrap('<span />').parent().hide()

演示：Fiddle

Answer 3

可能你可以尝试jquery：

var html = $('#description p').map(function(){
    return $(this)[0].outerHTML;
}).get();

$('#description').html(html);

Demo Fiddle to try