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只是完美的。有人可以帮忙吗？

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

Answer 2

CSS定义标签内容的外观。没有标签，没有造型。

您需要修改HTML。遗憾。

Answer 3

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

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

Answer 4

使用javascript（以及我的jQuery）：

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

如果你有多个content类，那么你需要重写一下来处理一个集合

Answer 5

没有简单的方法。你必须在JavaScript上编写html脱衣舞，或者只是手工修改你的html。

Answer 6

CSS：

#content {
  visibility: hidden;
}

JavaScript的：

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

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

6 个答案:

仅CSS解决方案