首頁 > web前端 > js教程 > 如何使用 CSS 隱藏 HTML 中未標記的文字?

如何使用 CSS 隱藏 HTML 中未標記的文字?

Susan Sarandon
發布: 2024-12-14 02:51:13
原創
413 人瀏覽過

How Can I Hide Untagged Text in HTML Using CSS?

在 HTML 中隱藏未標記的文字

在 HTML 中,可以隱藏未包含在任何 HTML 標籤中的文字片段。此文字通常稱為“純文字”,對於使用傳統方法隱藏可能會帶來挑戰。

JavaScipt 或 CSS?

正如使用者所提到的,包裝div 或其他標籤中的文字是不切實際的。因此,需要探索 JavaScript 或 CSS 等替代方法。

CSS 駭客

隱藏純文字的一種有效CSS 駭客涉及操縱字體大小:

.entry {
  font-size: 0;
}
.entry * {
  font-size: initial;
}
登入後複製

透過將容器div 的字體大小:

透過將容器div 的字體大小設定為零,該容器內的所有元素的字體大小也將為零,從而有效地隱藏它們。但是,為了恢復標記元素的可見性,第二個 CSS 規則將字體大小設定回其初始值,從而確保只有未標記的文字保持隱藏。

<div class="entry">
  <p class="page-header"><strong>Enter</strong></p>
  <p>something here</p>
  Enter (this will be hidden !!)
  <div class="subhead">another text here</div>
</div>
登入後複製
範例:

透過將CSS hack 應用於此HTML,「p」標籤後面的「Enter」文字將被有效隱藏,而容器中的其他文字將被隱藏。不受影響。

以上是如何使用 CSS 隱藏 HTML 中未標記的文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板