Скрыть определенный текст из html с помощью css

Question

В приведенном ниже коде мне нужно скрыть 2nd tag и связанный с ним контент, как я могу сделать это в Css

<div id="content-list">
  <b>Title:</b> some random text <br/>
  <b>Title2:</b> some random text 2 <br/>
</div>

С помощью приведенного ниже css я могу скрыть только второй тег b, но не могу скрыть текст.

div > b:nth-child(1) {
    display: none;
}

Примечание. Макет HTML не может быть изменен по разным причинам.

html css

0

Calvin Care 19 Ноя 2022 в 00:16

Вы действительно хотите сделать это для всех div в документе?

–

AtomicUs5000

19 Ноя 2022 в 00:21

Div как id, поэтому я нацелюсь туда, где это необходимо

–

Calvin Care

19 Ноя 2022 в 00:24

Это означало бы изменение HTML

–

AtomicUs5000

19 Ноя 2022 в 00:25

Я обновил свой html

–

Calvin Care

19 Ноя 2022 в 00:28

Answer 1

В CSS нет возможности сослаться на текстовый узел. Однако, вероятно, есть некоторые хакерские способы сделать это.

Один из способов сделать это, если макет поддерживает это, состоит в том, чтобы скрыть заголовок и все, что рядом с ним, используя большое отрицательное число для левого поля.

.content-list > b:nth-of-type(2) {
  margin-left: -1000000px;
}

<div class="content-list">
  <b>Title:</b> some random text <br />
  <b>Title 2:</b> some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text  <br />
  <b>Title 3:</b> some random text <br />
</div>

Как вы можете видеть, если вы запустите фрагмент, есть некоторые проблемы. В основном будет просто пробел как в том месте, где был текст. Кроме того, любой, кто использует программу для чтения текста, по-прежнему будет иметь к ней доступ.

Единственным реальным решением будет либо исправить ваш html, либо использовать JavaScript.

3

Daniel Gimenez 19 Ноя 2022 в 00:33

Answer 2

«Я могу скрыть только второй тег b, но не могу скрыть текст» Это потому, что текст "какой-то случайный текст 2" находится за пределами тегов .

0

glenny 19 Ноя 2022 в 00:23

Да, я знаю об этом, есть ли способ скрыть текст?

–

Calvin Care

19 Ноя 2022 в 00:25

Да, сначала поместив текст «какой-то случайный текст» внутри тега

или

, а затем ссылаясь на тег этого текста в CSS, а не указывая на тег b.

–

glenny

19 Ноя 2022 в 00:37

Поскольку на самом деле вы не можете выбирать текстовые узлы напрямую, одним из обходных путей было бы установить размер шрифта родительского элемента равным 0. Затем сбросить размер шрифта для этих желаемых элементов b. При этом должны отображаться только элементы b, а соседние текстовые узлы должны быть эффективно скрыты.

div {
font-size: 0px
}

div > b:nth-child(1) {
    font-size: 16px
}

<div>
  <b>Title:</b> some random text <br/>
</div>

0

sohaib 19 Ноя 2022 в 00:36

Альтернативное решение — изменить исходный HTML-код на что-то более похожее на это, что настоятельно рекомендуется с точки зрения доступности:

#content-list div:nth-child(2) {
    display: none;
}

<div id="content-list">
  <div>
    <h2>Title 1</h2>
    <span>some random text</span>
  </div>
  
  <div>
    <h2>Title 2</h2>
    <span>some random text</span>
  </div>
  
  <div>
    <h2>Title 3</h2>
    <span>some random text</span>
  </div>
</div>

0

erecodes 19 Ноя 2022 в 00:42

Answer 3

Поскольку на самом деле вы не можете выбирать текстовые узлы напрямую, одним из обходных путей было бы установить размер шрифта родительского элемента равным 0. Затем сбросить размер шрифта для этих желаемых элементов b. При этом должны отображаться только элементы b, а соседние текстовые узлы должны быть эффективно скрыты.

div {
font-size: 0px
}

div > b:nth-child(1) {
    font-size: 16px
}

<div>
  <b>Title:</b> some random text <br/>
</div>

0

sohaib 19 Ноя 2022 в 00:36

Answer 4

Альтернативное решение — изменить исходный HTML-код на что-то более похожее на это, что настоятельно рекомендуется с точки зрения доступности:

#content-list div:nth-child(2) {
    display: none;
}

<div id="content-list">
  <div>
    <h2>Title 1</h2>
    <span>some random text</span>
  </div>
  
  <div>
    <h2>Title 2</h2>
    <span>some random text</span>
  </div>
  
  <div>
    <h2>Title 3</h2>
    <span>some random text</span>
  </div>
</div>

0

erecodes 19 Ноя 2022 в 00:42

Скрыть определенный текст из html с помощью css

4 ответа

Похожие вопросы

Новые вопросы

html