如何隐藏未包含在<p>或<span>中的文本？

Question

我有一个HTML代码，其中我只想隐藏文本部分，但是它并没有被包含在任何标签内。以下是一个例子：

<div class="content">

    Give comfortable and durable place to work with a desk.
    Lock the center drawer and all of the drawers lock,
    keeping your files and supplies secure.

    <table cellpadding="4" cellspacing="0">
        <tbody>
            <tr>
                <th align="right">Available Options:</th>
                <td>Desktop Color: Fusion Maple, Gray Nebula...</td>
            </tr>
            <tr>
                <th align="right">Book Box Construction:</th>
                <td>Not applicable</td>
            </tr>
        </tbody>
    </table>
</div>

我该怎样在不更改HTML的情况下隐藏上面的“给予舒适耐用”的部分呢？我希望可以通过CSS，如果必要的话，再使用Javascript进行操作。仅通过CSS实现将是完美的方案。有谁能提供帮助吗？

- TruMan1

---

在你的例子中，没有任何文本被包裹在 p 或 span 中，你想要隐藏所有内容吗？ - jeroen

一个非常可怕的解决方案可能是将文本的颜色更改为与背景相匹配的颜色？ - Tomas McGuinness

为什么你不能直接更改HTML？ - thirtydot

我无法更改它，因为它来自另一个我完全无法控制的系统。我只想隐藏表格上方的文本，而保留表格显示。 - TruMan1

你应该使用你正在使用的编程语言来删除检索此HTML的文本。如果你正在使用PHP，它可以删除它，如果你正在使用JavaScript，它也可以删除它。你是如何检索这个HTML的？ - thirtydot

@TruMan1：提供的任何答案有用/可接受吗？ - Robert Koritnik

Answer 1

看，妈妈，没有脚本！

CSS唯一解决方案

.content
{
    text-indent: -1000em;
}

.content *
{
    text-indent: 0;
}

/* This one's pure cherry on top ;) */
/* Remove excess vertical space */
.content *:first-child
{
    margin-top: -1em;
}

JSFiddle demo.

- Robert Koritnik

---

但这也隐藏了此DIV中的其余内容。 - Diodeus - James MacFarlane

@thirtydot：你比我更快地编写了一个JSFiddle演示，但我们都得出了相同的结论。 - Robert Koritnik

如果您还添加了.content table { margin-top: -16px }，它将消除“一行高间隙”：http://jsfiddle.net/uU2jv/1/ - thirtydot

最好将负边距设置为1em，这样不管您的字体大小设置是多少，都不会有太大影响... 是吧？ ;) 为了使其更加通用，我更新了我的CSS，这样无论第一个子元素是什么（表格还是其他任何东西），都不会有影响。 - Robert Koritnik

Answer 2

这将删除文本节点，文本节点是文本的容器：

var div = document.getElementsByTagName('div')[0];
div.removeChild(div.firstChild);

- Kai

Answer 3

CSS定义了标签内容的外观。没有标签，就没有样式。

您需要修改HTML。抱歉。

- Diodeus - James MacFarlane

Answer 4

使用JavaScript（在我这里还有jQuery）:

var table = $('.content table'); //copy the table
$('.content').html(table); //replace the html of div.content with table

如果您有多个类别的内容，那么您需要稍微改写一下代码来处理这些集合。

- Prescott

Answer 5

CSS：

#content {
  visibility: hidden;
}

JavaScript：

document.getElementsByTagName("div")[0].style.visibility = "hidden";
or:
document.getElementsByClassName("content")[0].style.visibility = "hidden";

- Philip Sheard

Answer 6

这并不是一件容易的事情。你需要编写一个JavaScript HTML剥离器，或者直接手动修改你的HTML。

- Scherbius.com