无法用标签包裹时，如何隐藏HTML中的无标签文本？

嘿，这个情况我之前也遇到过——没法给裸文本加标签确实有点头疼，但咱们用纯CSS或者JavaScript都能轻松解决，给你几个实用的方案：

这个思路很巧妙：把父容器.entry的字体大小设为0，这样所有直接嵌套在它里面的裸文本都会被“压缩”到完全看不见；然后再把容器里需要正常显示的子元素（比如<p>、<div>）的字体大小恢复回来就行。

.entry {
  font-size: 0; /* 隐藏所有直接子文本节点 */
}

.entry p, .entry div {
  font-size: 16px; /* 把需要显示的子元素字体恢复，大小可根据需求调整 */
}

这样一来，那段没标签的“Enter”就会彻底消失，而容器内的其他带标签内容完全不受影响。

如果不想改动字体大小，可以试试这个方法：把父容器的文本缩进设为一个超大的负数，配合溢出隐藏，把裸文本直接推出可视区域，再重置子元素的样式即可：

.entry {
  text-indent: -9999px;
  overflow: hidden;
}

.entry p, .entry div {
  text-indent: 0; /* 子元素重置缩进，恢复正常显示 */
  overflow: visible;
}

效果和方案1一致，适合有特殊字体大小要求的场景。

如果容器里有多个裸文本节点，需要精准定位删除目标的话，用JS就最合适了：

// 获取目标容器
const entryContainer = document.querySelector('.entry');
// 遍历容器的所有子节点
for (let i = 0; i < entryContainer.childNodes.length; i++) {
  const currentNode = entryContainer.childNodes[i];
  // 判断是否是纯文本节点，且内容匹配目标文本（注意trim掉空格避免误判）
  if (currentNode.nodeType === Node.TEXT_NODE && currentNode.textContent.trim() === 'Enter') {
    entryContainer.removeChild(currentNode);
    break; // 找到目标后立即退出循环，防止误删其他节点
  }
}

这个方法能精准定位并移除那段特定的文本，不会对其他元素或样式造成任何影响。

内容的提问来源于stack exchange，提问作者Sergi Khizanishvili