如何使用 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中文網其他相關文章！