css - CSS Media Query での h1 テキストの短縮

Question

「WHERE LIONS ROAM」というテキストを持つ<h1>要素があります (ここで確認できる私のサイトの名前: http://www.wherelionsroam.co.uk )。モバイルサイズのデバイスの場合、テキストを「WLR」だけに短縮するにはどうすればよいですか。私は既存のメディアクエリを次のように持っています (私はそれをいじってみましたが、完全に正しく理解できないようです):

    <style>
    @media screen and (max-width: 650px) {
    #wlr {
    display:none;
}
    #wlr:after {
    content: 'WLR';
}
    } /* end of media query block */
    </style>

Answer 1

:before と width を試してみてください

h1 {width:0;height:1em;overflow:hidden;padding-right:2.5em}
h1:before {content:'WLR';padding:0 2px;}