URL表示を簡略化させつつ、コピー＆ペーストに対応

注釈：この記事はQiitaにわたしが投稿していた記事を、自分のブログへ移動させたものです。
Twitterのソースを見ると分かるのですが、ふぁぼるっくにも同様の実装をしてあるので、そのときのやり方をメモしておきます。

Twitterなどで
「ふぁぼるっく bit.ly/favl... よろしく」
という表示があるのに、コピペすると
「ふぁぼるっく http://bit.ly/favlook ... よろしく」
となる。

隠れていた文字はいったいどこから！

これは

http://
bit.ly/favl
ook
 …

というタグを書いて、非表示にしたいところinvisibleクラスに

.invisible {
    font-size: 0;
    line-height: 0;
}

というCSSを適用します。
サイズと高さをゼロにするのがポイント、display:noneとか、それ系だと、そこに存在しないことになっちゃうので、コピペしたときにクリップボードへ格納されないのです。