如何隐藏未使用<p>或& lt; span>

How do I hide text that is not wrapped in <p> or <span>?

本文关键字：lt span 何隐藏 隐藏 未使用      更新时间：2023-09-26

我有一个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的情况下隐藏上面的"Give comfortable and durable…"部分?我希望通过CSS来实现，如果有必要的话，也可以使用Javascript。不过，只有CSS才是完美的。有人能帮忙吗?

看，没有手脚本!

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演示。

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

你需要修改HTML。对不起。

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

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

使用javascript(和jQuery在我的情况下):

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

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

要做到这一点并不容易。你必须在JavaScript上写一个html剥离器，或者简单地手工修改你的html。

CSS:

#content {
  visibility: hidden;
}
JavaScript: 

document.getElementsByTagName("div")[0].style.visibility = "hidden";
or:
document.getElementsByClassName("content")[0].style.visibility = "hidden";
相关文章：