clipを利用したテキストの非表示方法

CSS2から対応しているclipというプロパティを利用して、テキストを非表示にします。

.visibilittyHidden{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
}

理屈はいたってシンプルで、0px四方に切り抜いているだけです。

テキストの非表示方法はtext-indentに大きな値を指定するといった方法がありますが、その分の描画領域を保持してしまうブラウザもあります。

こちらは膨大な領域を確保することもなく、古い環境から対応しているので、より汎用性の高いものかと思います。

もちろんモバイル端末でも使用できます。