在CSS媒体查询中缩写h1文本

Question

我有一个<h1>元素，其中包含“WHERE LIONS ROAM”（我的网站名称，您可以在此处查看：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;}