如何使用 CSS 或 JavaScript 隐藏 HTML 中未标记的文本？

隐藏 HTML 中未标记的文本

您可能会遇到 HTML 代码中的文本缺少任何周围 HTML 标记的情况。隐藏此文本可能具有挑战性，尤其是在无法使用 div 或其他标签包裹文本的情况下。让我们使用 CSS 和 JavaScript 技术来解决这个问题。

CSS Hack

一种解决方案是采用针对特定元素的整体字体大小的 CSS hack：

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

在此代码中，.entry 元素的字体大小被指定为 0，从而有效隐藏其中的所有文本。但是，如果您希望 .entry 中的其他元素保留其原始字体大小，则这可能是不可取的。要有选择地隐藏特定文本，您可以添加嵌套选择器：

.entry .hidden-text {
  font-size: 0;
}

此方法仅针对并隐藏具有 .hidden-text 类的元素。

JavaScript

或者，您可以使用 JavaScript 动态操作 DOM 并实现所需的结果。例如，您可以使用以下 JavaScript 代码：

document.querySelector("div.entry p:nth-child(2)").style.display = "none";

在此代码中，我们选择 .entry div 中的第二段 (p:nth-child(2)) 并将其显示属性设置为“无”，有效地隐藏它。

CSS 和 JavaScript 之间的选择取决于您情况的具体要求。如果必须有选择地隐藏文本，那么 CSS 可能是更好的选择。另一方面，如果您需要根据某些条件或用户交互动态隐藏文本，那么 JavaScript 更合适。

以上是如何使用 CSS 或 JavaScript 隐藏 HTML 中未标记的文本？的详细内容。更多信息请关注PHP中文网其他相关文章！