Как мне скрыть текст, который не заключен в или ?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть 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 был бы идеальным. Кто-нибудь может помочь?

1. В вашем примере ни один из текстов не заключен в p или a span , вы хотите скрыть все?

2. Очень ужасным решением может быть изменение цвета текста, чтобы он соответствовал цвету фона?

3. Почему вы не можете просто изменить HTML?

4. Я не могу его изменить, потому что он поступает из другой системы, которую я вообще не контролирую. Я только хочу скрыть текст над таблицей. Таблица, которую я все еще хочу показать.

5. Вам следует удалить текст с помощью любого языка программирования, который вы используете для извлечения этого HTML. PHP может удалить его, если вы используете это, и то же самое может сделать JavaScript, если вы используете это. Как вы извлекаете этот HTML?

Ответ №1:

Смотри, мама, никаких скриптов ~~hands~~!

Решение только на 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.

1. Но это также скрывает остальное содержимое в этом DIV.

2. @thirtydot: вы быстрее меня написали демо-версию JSFiddle, но мы оба пришли к одному и тому же выводу.

3. Если вы также добавите .content table { margin-top: -16px } , это избавит от «разрыва в одну строку»: jsfiddle.net/uU2jv/1

4. было бы лучше установить отрицательное поле равным 1em, чтобы на самом деле не имело значения, какой размер установлен в ваших шрифтах… Не так ли? 😉 И чтобы сделать его более универсальным, я обновил свой CSS, поэтому на самом деле не имеет значения, какой элемент является первым дочерним. Это таблица или что-то еще.

Ответ №2:

CSS определяет внешний вид содержимого тега. Нет тега, нет стиля.

Вам нужно изменить HTML. Извините.

Ответ №3:

При этом удаляется текстовый узел, который является контейнером для текста:

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

Ответ №4:

Используя javascript (и jQuery в моем случае):

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

Если у вас несколько классов content , то вам нужно будет немного переписать это, чтобы поработать над коллекцией

Ответ №5:

Для этого нет простого способа. Вам придется написать программу для удаления html на JavaScript или просто изменить свой html вручную.

Ответ №6:

CSS:

 #content {
  visibility: hidden;
}

JavaScript:

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