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

在 HTML 中隐藏没有 HTML 标签的文本

问题：

您的 HTML 代码包含周围缺少任何 HTML 标记的文本。具体来说，您想要隐藏紧接在“p”标记之后的文本“Enter”。但是，不可能用 HTML 元素包裹文本。

解决方案：CSS 字体大小技巧

要实现您的目标，您可以采用 CSS hack利用 font-size 属性：

1. 创建一个类，例如“.entry”，并将其字体大小指定为 0：

.entry {
  font-size: 0;
}

2. 在此类中，添加通配符选择器（“*”）以将字体大小设置回其初始值：

.entry * {
  font-size: initial;
}

默认情况下，所有元素都会继承其父元素的字体大小。但是，通过将“.entry”类的字体大小设置为 0，您可以有效地隐藏其所有子元素。然后，通配符选择器会覆盖任何嵌套元素的此设置，从而允许显示其文本。

示例：

在代码中，应用“.entry”类到父 div 并确保“Enter”文本属于此类：

<div>

使用此 CSS 技巧， “Enter”文本将被隐藏，而“.entry”类中的其余内容仍然可见。

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