如何正確的隱藏文字

好多種方法。

使用時機與用法

有些時候為了 HTML 語意或無障礙設計，會在標籤中填入一些文字內容，但實際上卻不想顯示這些文字，這時候就會透過 CSS 來把這些文字內容來隱藏起來。

但是要如何正確地隱藏他們？如果沒有用正確的方法，這個標籤會被當作不存在，進而影響 HTML 的「合法性（Validations）」，所以我個人的建議是這樣子：

<h2 class="hide">一個標題，但我不想要顯示它</h2>

.hide {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: -9999;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

以我個人的實際經驗，這樣子的寫法是不會有問題的。

簡單說明一下它做了什麼：

• 設為 absolute，並定位到左上角
• z-index: -9999，總之就是最底層
• 寬高設為 0
• 最後三行則是讓文字超出範圍並隱藏

那什麼是不恰當的做法？

• display: none
• visibility: hidden

這兩個都會讓標籤被當作不存在。

補充

後來還發現了一些新的方法，所以也記錄下來。

.hide {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
  overflow: hidden !important;
}

.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}